引導控制佈局偏移問題

Question

我有以下fiddle這是我在利用自舉的造型工作頁面的削減樣本。

注：查看小提琴，確保結果窗格是足夠寬，能夠對單排第3個控制！

的問題，我有是，「自由文本搜索」的控制行似乎偏移到比我想的權利。我希望「免費文字搜索」標籤直接位於「商店編號」標籤和相同寬度下。隨着我魔杖相應的輸入開始在'商店編號'輸入開始，並在'父類別'選擇結束時完成。

我不能完全看到我已經錯了自舉類。

這裏是我的html：

<form class="form-horizontal"> 
    <h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3> 
    <div class="row form-group"> 
     <div class="col-md-4"> 
      <label for="storeNumber" class="col-sm-4 control-label">Store Number</label> 
      <div class="col-sm-6"> 
       <input id="storeNumber" class="form-control" type="text" 
       name="storeNumber" placeholder="Store Number" /> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <label for="actionedTo" class="col-sm-4 control-label">Actioned To</label> 
      <div class="col-sm-6"> 
       <select id="actionedTo" class="form-control"></select> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <label for="parentCategory" 
      class="col-sm-4 control-label">Parent Category</label> 
      <div class="col-sm-6"> 
       <select id="parentCategory" class="form-control"></select> 
      </div> 
     </div> 
    </div> 
    <div class="row form-group"> 
     <div class="col-md-12"> 
      <label for="freeTextSearch" 
      class="col-sm-2 control-label">Free Text Search</label> 
      <div class="col-sm-10"> 
       <input id="freeTextSearch" class="form-control" type="text" 
       name="requestNumber" placeholder="Free Text Search" /> 
      </div> 
     </div> 
    </div>  
</form> 

Answer 1

你的總體結構是反給自己的類。您正在構建您的輸入內聯的位置，但您使用的是form-horizontal，而您正在嵌套columns。

你不需要任何標記爲這個的。只需使用form-group類和columns即可。

查看工作片段。

*不需要我已經添加了CSS，使一切工作，但我相信它看起來與它更大的視口更好。

@media (min-width: 768px) { 
 
    .lg-group { 
 
    margin-top: 25px; 
 
    } 
 
    h3.form-title { 
 
    margin-bottom: 40px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a> 
 

 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container"> 
 
    <div class="form-group"> 
 
    <div class="col-sm-12"> 
 
     <h3 class="form-title">A Pointless Title</h3> 
 

 
    </div> 
 
    </div> 
 
    <form class="myForm"> 
 
    <div class="form-group"> 
 
     <label for="storeNumber" class="col-sm-2 control-label">Store Number</label> 
 
     <div class="col-sm-2"> 
 
     <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label> 
 
     <div class="col-sm-2"> 
 
     <select id="actionedTo" class="form-control" name="actionedTo"></select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label> 
 
     <div class="col-sm-2"> 
 
     <select id="parentCategory" class="form-control" name="parentCategory"></select> 
 
     </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="form-group lg-group"> 
 
     <label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label> 
 
     <div class="col-sm-10"> 
 
     <input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" /> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

多個控件

@media (min-width: 768px) { 
 
    .lg-group { 
 
    margin-top: 25px; 
 
    } 
 
    h3.form-title { 
 
    margin-bottom: 40px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a> 
 

 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container"> 
 
    <div class="form-group"> 
 
    <div class="col-sm-12"> 
 
     <h3 class="form-title">A Pointless Title</h3> 
 

 
    </div> 
 
    </div> 
 
    <form class="myForm"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="lg-group"> 
 
      <div class="form-group"> 
 
      <label for="storeNumber" class="col-sm-2 control-label">Store Number</label> 
 
      <div class="col-sm-2"> 
 
       <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label> 
 
      <div class="col-sm-2"> 
 
       <select id="actionedTo" class="form-control" name="actionedTo"></select> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label> 
 
      <div class="col-sm-2"> 
 
       <select id="parentCategory" class="form-control" name="parentCategory"></select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="lg-group"> 
 
      <div class="form-group"> 
 
      <label for="storeNumber" class="col-sm-2 control-label">Store Number</label> 
 
      <div class="col-sm-2"> 
 
       <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label> 
 
      <div class="col-sm-2"> 
 
       <select id="actionedTo" class="form-control" name="actionedTo"></select> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label> 
 
      <div class="col-sm-2"> 
 
       <select id="parentCategory" class="form-control" name="parentCategory"></select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12"> 
 
     <div class="row"> 
 
     <div class="form-group lg-group"> 
 
      <label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label> 
 
      <div class="col-sm-10"> 
 
      <input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>