Bootstrap模態表單標籤

Question

我有bootstrap模態表單的問題。我希望輸入的標籤位於輸入的頂部，而不是在輸入的前面。如果我讓窗口更小，那麼標籤跳上頂部，因爲你可以看到

。

如果我讓屏幕全寬下一張跳到輸入：

我不是很熟悉，引導網格系統，所以我不知道如何設置了。幫助非常感謝。 這是我的模態身體的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

您可以使用類「control-group」和「controls」進行調整。

喜歡的東西：

<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>