时间戳

首页 > 解决方案 > 如何使用引导程序垂直显示单选按钮

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

问题描述

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

这是上面代码的输出

示例的输出

标签： cssbootstrap-4

解决方案

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

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

意思是，通过使用适当的标签，它会自动垂直堆叠。由于span是一个内联元素，它显然会这样显示。因此，您需要使用非内联元素，例如引导程序给出的示例：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 的工作方式
  • 您应该像片段中那样为您的无线电输入使用标签。这是一种很好的做法，并且随着您的需求变化会更容易设计。

推荐阅读