均勻排列（3）（5）文本輸入行與Bootstrap3

我的目標是在引導的專欄，安排3排5個文本輸入。每個文本輸入的最大寬度應爲5個字符（文本輸入的size屬性）。均勻排列（3）（5）文本輸入行與Bootstrap3

以下是我對現在。請檢查代碼片段的完整頁面視圖。

.inputs { 
 
    border: 1px solid red; 
 
} 
 

 
.stuff { 
 
    border: 1px solid blue; 
 
} 
 

 
.container { 
 
    margin-top: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-4 stuff"></div> 
 
     <div class="col-md-8 col-xs-8 inputs"> 
 
      <div class="row"> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="a" class="control-label">A</label> 
 
        <input type="text" value="1" class="form-control" id="a" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="b" class="control-label">B</label> 
 
        <input type="text" value="2" class="form-control" id="b" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="c" class="control-label">C</label> 
 
        <input type="text" value="3" class="form-control" id="c" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="d" class="control-label">D</label> 
 
        <input type="text" value="4" class="form-control" id="d" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="e" class="control-label">E</label> 
 
        <input type="text" value="5" class="form-control" id="e" size="5" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

所以，我面對2個主要問題：

輸入沒有均勻地佈置;
它們的寬度是父容器的100％，所以size屬性值被忽略;

什麼來解決這個任務的最佳方法是什麼？

謝謝。

來源

2017-06-09 dizpers

代替使用COL-XS-2和COL-MD-2創建自定義CSS類用20％的寬度和的默認的樣式是通常在COL其餘的 - * – WheatBeak

謝謝，這是很好的解決方案。你認爲可以通過bootstrap3的網格系統來實現嗎？ – dizpers

不是開箱即用的，您將不得不使用一個小的自定義CSS來獲得5個偶數列而沒有任何偏移量。 – WheatBeak

它可以使用內置的推類引導的可能。您可以根據需要調整示例中較小的col大小。但我相信通過設置更多的列大小並推動，這就是你想要達到的目標。

.inputs { 
 
    border: 1px solid red; 
 
} 
 

 
.stuff { 
 
    border: 1px solid blue; 
 
} 
 

 
.container { 
 
    margin-top: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-4 stuff"></div> 
 
     <div class="col-md-8 col-xs-8 inputs"> 
 
      <div class="row"> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="a" class="control-label">A</label> 
 
        <input type="text" value="1" class="form-control" id="a" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="b" class="control-label">B</label> 
 
        <input type="text" value="2" class="form-control" id="b" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="c" class="control-label">C</label> 
 
        <input type="text" value="3" class="form-control" id="c" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="d" class="control-label">D</label> 
 
        <input type="text" value="4" class="form-control" id="d" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="e" class="control-label">E</label> 
 
        <input type="text" value="5" class="form-control" id="e" size="5" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-06-09 17:35:10

均勻排列（3）（5）文本輸入行與Bootstrap3

回答

相關問題