Bootstrap Form-Horizo​​ntal Appearance

Question

我對Bootstrap還是很新的，所以如果我的問題太簡單，請原諒我。

我已經使Bootstrap網頁幾乎顯示爲我想要的，但是當我更改屏幕大小時，佈局從OK（在手機&平板電腦大小）變爲Bad（在全桌面大小）。

我的代碼如下：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-horizontal" role="form"> 
       <fieldset> 

        <!-- Text input--> 
        <div id="Row1" class="form-group"> 
         <label class="col-sm-2 control-label" for="txtDeviceID">Device ID:</label> 
         <div class="col-sm-4"> 
          <input id="txtDeviceID" type="text" placeholder="Device ID" class="form-control" runat="server"> 
         </div> 

         <label class="col-sm-2 control-label" for="ddlOwnerID">Owner ID:</label> 
         <div class="col-sm-4"> 
          <select class="form-control" id="ddlOwnerID" runat="server"> 
          </select> 
         </div> 
        </div> 

        <!-- Text input--> 
        <div id="Row2" class="form-group"> 
         <label class="col-sm-2 control-label" for="ddlDevType">Device Type:</label> 
         <div class="col-sm-4"> 
          <select class="form-control" id="ddlDevType" runat="server"> 
          </select> 
         </div> 

         <label class="col-sm-2 control-label" for="txtLocation">Location:</label> 
         <div class="col-sm-4"> 
          <input type="text" id="txtLocation" placeholder="Location" class="form-control" runat="server"> 
         </div> 
        </div> 

        <!-- Text input--> 
        <div id="Row3" class="form-group"> 
         <label class="col-sm-2 control-label" for="txtCreditFee">Credit Fee:</label> 
         <div class="col-sm-4"> 
          <input type="text" id="txtCreditFee" placeholder="Credit Fee" class="form-control" runat="server"> 
         </div> 

         <label class="col-sm-2 control-label" for="txtClosingText">Closing Msg:</label> 
         <div class="col-sm-4"> 
          <textarea id="txtClosingText" class="form-control h4" rows="2" runat="server" wrap="off" placeholder="* Closing Msg *" runat="server"></textarea> 
         </div> 
        </div> 
        </fieldset> 
       </form> 
      </div> <!-- /.col-lg-12 --> 
     </div> <!-- /.row --> 
</div> <!-- class="container" --> 

我的平板電腦「好」屏幕顯示如下：

但是當我打開瀏覽器窗口，全桌面屏幕尺寸的顯示變化使用輸入字段重疊標籤：

我有colum ns在我的HTML div中定義，我不認爲NoWrap在標籤上設置爲True（雖然我不能確定），但它似乎沒有幫助。

• 如何讓全屏桌面屏幕尺寸看起來不錯並保留響應能力，以便較小的屏幕尺寸看起來不錯？
• 我應該在各種CSS文件中查看以引入更改？

您的建議/意見將不勝感激。

Answer 1

在你的代碼的第3行，你設置的div類：col-md-4 col-md-offset-4

這意味着您的標記會佔用不超過4列上md尺寸的屏幕和更大。

既然你沒有指定在類中xs或sm山坳屬性值，則默認爲12列，它是不是直到你的屏幕尺寸超過了你的4列的規則發揮作用的md值。