Bootstrap 模态表单标签

Question

我对引导模式形式有疑问。我希望输入的标签位于输入的顶部，而不是在它的前面。如果我让窗口变小，那么标签会跳到顶部，如您在

上所见

.

如果我让屏幕全宽，它会跳到输入旁边：

我对引导网格系统不是很熟悉，所以我不知道如何设置它。非常感谢您的帮助。 这是我的模态体的 html：

<div class="modal-body">
    <form id="form" class="form-horizontal" role="form" method="post" enctype="multipart/form-data"  id="post-form">
        {% csrf_token %}
        <div id="error-div">
        </div>
        <div class="form-group" csrf="{{ csrf_token }}">
          <label  class="col-sm-2 control-label" for="exam_number">Number</label>
          <div class="col-sm-10">
            <select class="form-control" id="exam_number" name="exam_number">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
          </div>
        </div>
          <div class="form-group">File</label><br>
            <div class="col-sm-10">
              <input  name="exam_file" type="file" accept="*" multiple required>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
            </div>
          </div>  
  </div>

Answer 1

您可以清除网格类 col-sm-2 和 col-sm-10。 要么 您可以将 col-sm-10 更改为 col-sm-12。

Answer 2

您可以使用“控制组”和“控件”类进行调整。

类似：

<div class="modal-body">
<form id="form" class="form-horizontal" role="form" method="post" enctype="multipart/form-data"  id="post-form">
    {% csrf_token %}
    <div id="error-div">
    </div>
    <div class="control-group" csrf="{{ csrf_token }}">
      <label class="control-label" for="exam_number">Number</label>
      <div class="controls">
        <select class="col-sm-10" id="exam_number" name="exam_number">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
        </select>
        </div>
    </div>
    <div class="control-group">
      <label class="control-label">File</label><br>
          <input  name="exam_file" type="file" accept="*" multiple required>
      </div>
    </div>  
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        </div>
    </div>