Question

我有一个考试系统，我想按行显示我的选择。我已经尝试使用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>

这是上面代码的输出

Answer 1

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

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

意思是，通过使用适当的标签，它会自动垂直堆叠。由于span是内联元素，因此显然会这样显示。因此，您需要使用非内联元素，例如示例引导程序gives：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>

其他要点：

style="w"不是标准的，此属性对您有用吗？
您所有的单选按钮共享相同的ID，但ID却不起作用
您应该在代码段中使用标签作为单选输入。这是个好习惯，随着需求的变化，样式会更容易。

Answer 2

Usallay有很多方法可以做，但是要在每个span元素后保持简单的使用break标记

import matplotlib.pyplot as plt

xValues = list(range(10))
quads = [x** 2 for x in xValues]
plt.plot(xValues, quads)
plt.gca().invert_yaxis()
plt.show()

使用CSS：

div跨度 { 显示：块 }

Answer 3

您可以将它们放在<Agent>标签中吗？另外，我认为垂直对齐的Flexbox可能会有所帮助

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

3 个答案: