如何使用引导程序垂直显示单选按钮

debugcn 发表于 Dev

坦维尔·艾哈迈德（Tanvir Ahmed）

我有一个考试系统，我想按行显示我的选择。我已经尝试使用，display: block;但是没有用。这是下面的代码。

<div class="col-md-10">
    <div class="box box-primary">
        <div class="box-header">
            <h3 class="box-title">Add Question</h3>
        </div>
        <div class="box-body">
            <form method="post" action="{{url('tests')}}">
                @csrf
                <div class="form-group row">
                    <label for="name" class="col-md-2 col-form-label text-md-right">{{ __('Question') }}</label>

                    <div class="col-md-6">
                        <textarea style="border: none"
                            class="form-control{{ $errors->has('question') ? ' is-invalid' : '' }}" name="question"
                            placeholder="Enter Question Here">{{$questions->question}}</textarea>
                        @if ($errors->has('question'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('question') }}</strong>
                        </span>
                        @endif

                    </div>
                </div>
                <div style="display: block"><br>
                    <span class="input-group-addon">
                        <input type="radio" name="q" id="option1" style="w">{{$questions->option1}}
                    </span>
                    <span class="input-group-addon">
                        <input type="radio" name="q" id="option1" style="w">{{$questions->option2}}
                    </span><span class="input-group-addon">
                        <input type="radio" name="q" id="option1" style="w">{{$questions->option3}}
                    </span><span class="input-group-addon">
                        <input type="radio" name="q" id="option1" style="w">{{$questions->option4}}
                    </span>
                </div>

这是上面代码的输出

魂光闪闪

执行此操作的“引导程序”方法是让引导程序处理它。根据他们的文档：

由于Bootstrap将display：block和width：100％应用于几乎所有表单控件，因此默认情况下，表单将垂直堆叠。

意思是，通过使用适当的标签，它会自动垂直堆叠。由于span是一个内联元素，因此很明显它将如此显示。因此，您需要使用非内联元素，如示例bootstrap给出的：div。

他们有专门的类来处理诸如水平表单元素之类的情况。

接受的答案不是语义转发解决方案。建立网站时，出于多种原因，应始终考虑语义，但主要是SEO和可访问性。

Bootstrap具有出色的文档，只有熟悉它才能让您受益。直接从下面采取以下解决方案：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-10">
  <div class="box box-primary">
    <div class="box-body">
      <form method="post">
        <h3>Question</h3>
        <div>
          <div class="form-check">
            <input type="radio" class="form-check-input" name="q" id="option1">
            <label class="form-check-label" for="option1">Option 1</label>
          </div>
          <div class="form-check">
            <input type="radio" class="form-check-input" name="q" id="option2">
            <label class="form-check-label" for="option2">Option 2</label>
          </div>
          <div class="form-check">
            <input type="radio" name="q" id="option3" class="form-check-input">
            <label class="form-check-label" for="option3">Option 3</label>
          </div>
          <div class="form-check">
            <input type="radio" name="q" id="option4" class="form-check-input">
            <label class="form-check-label" for="option4">Option 4</label>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

其他要点：