HTML引導網格列不對齊

我想濾盒排列成跨越每行3個街區網格...HTML引導網格列不對齊

我不想失去自舉的樣子，所以我沒有試過去除一些這些導航欄/輸入組類。有沒有一個乾淨的方法來解決這個問題？我應該採取什麼方法來排除未來這樣的問題？下面的jsfiddle

<nav class="navbar navbar-default" ng-if="filterOn"> 
<form class="navbar-form"> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter: </span> 

    <input class="form-control" ng-model="filterOptions.filterText" /> 
    </span> <span class="input-group col-sm-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span> 

    <select class="form-control" name="mySelect1" ng-model="sel1"> 
     <option></option> 
     <option>{{selections}}</option> 
    </select> 
    </span> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter B: </span> 

    <select class="form-control" name="mySelect2" ng-model="nameVarTo"> 
     <option></option> 
     <option>selections2</option> 
    </select> 
    </span> 
</form>

http://jsfiddle.net/u1wffrd4/1/

來源

2015-11-20 darkace

你想要3行或3列嗎？ –

3列請 – darkace

請勿在一個標籤中使用「input-group col-sm-4」類，爲其添加另一個div作爲父項，然後使用「col-sm-4」 –

試試這個：

.input-group { 
 
    width:100%; 
 
}

<div class="table-responsive"> 
 
    <nav class="navbar navbar-default" ng-if="filterOn"> 
 
     <form class="navbar-form"> 
 
      <div class="col-sm-4 col-xs-12"> 
 
      <span class="input-group"> 
 
       <span class="input-group-addon" style="width: 20%">Filter: </span> 
 
       <input class="form-control" ng-model="filterOptions.filterText" /> 
 
      </span> 
 
      </div> 
 
      <div class="col-sm-4 col-xs-12"> 
 
      <span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span> 
 
       <select class="form-control" name="mySelect1" ng-model="sel1"> 
 
        <option></option> 
 
        <option>{{selections}}</option> 
 
       </select> 
 
      </span> 
 
      </div> 
 
      <div class="col-sm-4 col-xs-12"> 
 
      <span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter B: </span> 
 

 
       <select class="form-control" name="mySelect2" ng-model="nameVarTo"> 
 
        <option></option> 
 
        <option>selections2</option> 
 
       </select> 
 
      </span> 
 
      </div> 
 
     </form> 
 
    </nav> 
 
</div>

來源

2015-11-20 12:04:03

好啊。還有一件事：爲什麼這些元素不會在行寬的三分之一處填滿整個寬度？ – darkace

put .input-group {width：100％; }在你的CSS。你可以指定20％的所有標籤寬度。我更新了以上 –

這很完美，謝謝。直接編輯bootstrap.css是不好的做法嗎？我應該解壓縮到一個custom.css，並使用像'.input-group .fullwidth {width：100％; ''，對吧？ – darkace


             
   
    
    
 

 
    .input-group.col-xs-4.col-md-4 { 
 
     float: left; 
 
     padding: 5px; 
 
    } 
    <div class="table-responsive"> 
 
    <nav ng-if="filterOn" class="navbar navbar-default"> 
 
     <form class="navbar-form"> 
 
<div class="show-grid"> 
 
      <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter: </span> 
 

 
       <input ng-model="filterOptions.filterText" class="form-control"> 
 
      </span> 
 
      <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span> 
 

 
       <select class="form-control" name="mySelect1" ng-model="sel1"> 
 
        <option></option> 
 
        <option>{{selections}}</option> 
 
       </select> 
 
      </span> 
 
      <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter B: </span> 
 

 
       <select class="form-control" name="mySelect2" ng-model="nameVarTo"> 
 
        <option></option> 
 
        <option>selections2</option> 
 
       </select> 
 
      </span> 
 
    </div> 
 
     </form> 
 
    </nav> 
 
</div>

來源

2015-11-20 12:27:43 Ram

你必須用.container或.container-fluid和.row類來包裝你的代碼。檢查這個http://jsfiddle.net/manishrane1/u1wffrd4/2/

<div class="container"> 
<div class="row"> 
    <div class="table-responsive"> 
    <nav class="navbar navbar-default" ng-if="filterOn"> 
     <form class="navbar-form"> 
      <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter: </span> 

       <input class="form-control" ng-model="filterOptions.filterText" /> 
      </span></div> 
      <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span> 

       <select class="form-control" name="mySelect1" ng-model="sel1"> 
        <option></option> 
        <option>{{selections}}</option> 
       </select> 
      </span></div> 
      <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter B: </span> 

       <select class="form-control" name="mySelect2" ng-model="nameVarTo"> 
        <option></option> 
        <option>selections2</option> 
       </select> 
      </span></div> 
     </form> 
    </nav> 
     </div> 
</div> 
</div>

來源

2015-11-20 12:28:06

HTML引導網格列不對齊

回答

相關問題