如何輸入組

我的HTML看起來像這樣在achive一個負責任的行爲：如何輸入組

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="input-group"> 
      <div class="input-group-btn"> 
       <button type="button" class="btn btn-default fa fa-check-square" data-toggle-tooltip="tooltip" 
          title="Toggle All" id="btnItemgridSelectAll" tabindex="5"> 
       </button> 
       <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip" 
          title="Add New Row" tabindex="6"> 
       </button> 
       <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip" 
          title="Delete Selected Row" tabindex="7"> 
       </button> 
      </div> 
      <label class="input-group-addon" >LongText1111111</label> 

      <input class="form-control" type="text" /> 

      <label class="input-group-addon" >LongText2222222</label> 
     </div> 
    </div> 
</div>

當觀看小屏幕分辨率佈局中的輸入組內的控件不換行。

請幫幫我。

來源

2014-10-08 Suganth G

COL-XS-12 COL-SM-12 COL-MD-12 COL-LG-1 2 - 矯枉過正。只使用col-xs-12。如果它始終爲全角，則可以刪除行和列類。至於使它響應，做一個jSbin或小提琴（或Bootply）。 – Christina 2014-10-08 11:54:57

好的，看到這個演示http://www.bootply.com/dFGzski0Al，再次它不包裹 – 2014-10-08 13:04:57

他們爲什麼要包裝？你把所有東西都扔進一個巨大的山坳。你想如何包裝這些控件？你能提供一個模型嗎？ – Fred 2014-10-08 13:20:34

嗯，根據你想要看什麼時候它很小，以及什麼斷點你會添加CSS來改變它的樣子，這裏有一個例子。改變CSS的最好方法是看看他們的CSS，然後知道要改變什麼。保留一份未縮小的副本或訪問回購並在線查看。

演示：http://jsbin.com/piyado/1/

enter image description here

CSS

@media (max-width:500px) { 
    .custom-input-group.input-group .input-group-btn { 
     width:99%; 
     display:block; 
     margin-bottom:5px; 
    } 
    .custom-input-group.input-group .input-group-btn .btn { 
     width: 34%; 
    } 
    .custom-input-group.input-group .input-group-btn .btn:last-child { 
     border-radius:0 4px 4px 0 
    } 
    .custom-input-group { 
     display: block 
    } 
    .custom-input-group.input-group .input-group-addon { 
     clear: both; 
     display: block; 
     width: 100%; 
     border: 1px solid #ccc; 
     border-radius: 4px; 
    } 
    .custom-input-group.input-group .input-group-addon + .form-control { 
     border-radius: 4px; 
     margin-bottom: 5px; 
    } 
}

HTML

<div class="container"> 
     <div class="input-group custom-input-group"> 
      <div class="input-group-btn"> 
       <button type="button" class="btn btn-default fa fa-check-square" data-toggle-tooltip="tooltip" 
        title="Toggle All" id="btnItemgridSelectAll" tabindex="5"> 
       1 </button> 
       <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip" 
        title="Add New Row" tabindex="6">2 
       </button> 
       <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip" 
        title="Delete Selected Row" tabindex="7"> 
       3 </button> 
      </div> 
      <label class="input-group-addon" >LongText1111111</label> 
      <input class="form-control" type="text" /> 
      <label class="input-group-addon" >LongText2222222</label> 
     </div> 
     </div>

來源

2014-10-08 19:42:15 Christina

感謝您的回答和演示toooooo :) – 2014-11-04 06:56:54

回答

相關問題