引導多個「固定寬度的輸入」在1列

Question

我想要實現的是，下面是關於1行

http://jsfiddle.net/strgga/6yanLf8q/30/

.rightstraight { 
    border-bottom-right-radius: 0px; 
    border-top-right-radius: 0px; 
    -moz-border-radius-topright: 0; 
    -moz-border-radius-bottomright: 0; 
} 
.leftstraight { 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    -moz-border-radius-topleft: 0; 
    -moz-border-radius-bottomleft: 0; 
} 
.input-group-addon.primary { 
    color: rgb(255, 255, 255); 
    background-color: rgb(50, 118, 177); 
    border-color: rgb(40, 94, 142); 
} 
.input-group-addon.success { 
    color: rgb(255, 255, 255); 
    background-color: rgb(92, 184, 92); 
    border-color: rgb(76, 174, 76); 
} 
.input-group-addon.info { 
    // color: rgb(255, 255, 255); 
    // background-color: rgb(57, 179, 215); 
    // border-color: rgb(38, 154, 188); 
    border: 1px solid #ccc; 
    background-color: rgb(255, 255, 255); 
    color: rgb(0, 0, 0); 
} 
.input-group-addon.warning { 
    color: rgb(255, 255, 255); 
    background-color: rgb(240, 173, 78); 
    border-color: rgb(238, 162, 54); 
} 
.input-group-addon.danger { 
    color: rgb(255, 255, 255); 
    background-color: rgb(217, 83, 79); 
    border-color: rgb(212, 63, 58); 
} 
.has-feedback .form-control-feedback { 
    right: 0px !important; 
    top: 0; 
    padding-right: 4px !important; 
} 
.form-control-feedback { 
    width: 22px !important; 
    text-align: left !important; 
} 
.has-feedback .form-control { 
    padding-right: 22px !important; 
} 
.righta { 
    text-align: right; 
} 
.middla { 
    text-align: center; 
} 
.slim { 
    width: 61px; 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="container"> 
    <h2>Gratisofferte</h2> 
    <form role="form" class="form-horizontal"> 
    <div id="form1"> 
     <div class="form-group "> 
     <div class="col-sm-4 col-xs-5"> 
      <label>Aktuelle Adresse</label> 
      <div class=" has-feedback has-success"> 
      <input class="rightstraight form-control" placeholder="z.B. Paradiesstrasse 10" type="text" id="n_adr"> 
      <span id="fname1" class="glyphicon form-control-feedback glyphicon-ok"></span> 
      </div> 
     </div> 
     <div class="col-sm-3 col-xs-4" style="margin-left:-30px;"> 
      <label>PLZ</label> 
      <input class="leftstraight form-control" placeholder="PLZ" type="text" id="n_plz"> 
     </div> 
     <div class="col-sm-5 col-xs-3"> 
      <label>Zimmer</label> 
      <select class="slim form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      </select> 


      <label>Etage</label> 
      <select class="slim form-control"> 
      <option>E</option> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      </select> 

      <label>Lift</label> 
      <select class="slim form-control"> 
      <option>ja</option> 
      <option>nein</option> 
      </select> 
     </div> 
     </div> 

     <div class="form-group"> 
     <div class="col-sm-12"> 
      <button id="next" type="submit" class="btn btn-info pull-right">weiter</button> 
     </div> 
     </div> 

    </div> 
    </form> 
    <hr> 
</div>

爲什麼自舉不把在一條線上選擇？他們在一個有界的列中？

Answer 1

檢查這一點，你需要這樣的方式.. DEMO

<div class="container"> 
    <h2>Gratisofferte</h2> 
    <form role="form"> 
    <div class="form-group col-md-3"> 

      <label>Aktuelle Adresse</label> 

      <input class="form-control " placeholder="z.B. Paradiesstrasse 10" type="text" id="n_adr"> 
       <span id="fname1" class="glyphicon form-control-feedback glyphicon-ok"></span> 
</div> <div class="form-group col-md-2"> 

      <label>PLZ</label> 
      <input class="leftstraight form-control" placeholder="PLZ" type="text" id="n_plz"> 
     </div> 
      <div class="form-group col-md-2"> 
      <label>Zimmer</label> 
      <select class="slim form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option></select> 
     </div> 
    <div class="form-group col-md-2"> 
      <label>Etage</label> 
     <select class="slim form-control"> <option>E</option><option>1</option> <option>2</option> <option>3</option> <option>4</option></select></div> 
    <div class="form-group col-md-2"> 
      <label>Lift</label> 
      <select class="slim form-control"> <option>ja</option> <option>nein</option></select> 

     </div> 

    <div class="form-group col-md-1"> 

     <button id="next" type="submit" class="btn btn-info pull-right">weiter</button> 
     </div> 

</form> 
<hr> 
</div> 

Answer 2

答案是克里斯蒂娜在這個崗位

Two inputs same form column taking all the cell width Bootstrap 3

解決之道在於行的嵌套給出，因此使得它比12部分網格中的更細。所以你在4-4-4中放置第一個網格，並且你可以在每個網格中再次創建一個網格。這樣你就可以實現比電網的12-tel更多的功能。例如，您可以拆分5-5-1中的最後一列，導致13％ - 13％和2.7％（= 12-tel爲0.33）的總分解量。

<div class="container"> 
 
    <h2>Gratisofferte</h2> 
 
    <form role="form" class="form-horizontal"> 
 
<div id="form1"> 
 
    <div class="form-group "> 
 
\t \t <div class="col-sm-4 col-xs-5"> 
 
\t \t \t <label>Aktuelle Adresse</label> 
 
      <div class=" has-feedback has-success"> 
 
\t \t \t <input class="rightstraight form-control" placeholder="z.B. Paradiesstrasse 10" type="text" id="n_adr"> 
 
       <span id="fname1" class="glyphicon form-control-feedback glyphicon-ok"></span></div> 
 
</div> 
 
\t \t <div class="col-sm-3 col-xs-4" style="margin-left:-30px;"> 
 
\t \t \t <label>PLZ</label> 
 
      <input class="leftstraight form-control" placeholder="PLZ" type="text" id="n_plz"> 
 
\t \t </div> 
 
\t \t <div class="col-sm-5 col-xs-3"> 
 
      <div class="row"> 
 
       \t \t <div class="col-sm-4 col-xs-4" style=""> 
 
\t \t \t <label>Zimmer</label> 
 
\t \t \t <select class="slim form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option></select> 
 
\t \t </div> 
 
       \t \t <div class="col-sm-4 col-xs-4" style="margin-left:-30px;"> 
 
\t \t \t <label>Etage</label> 
 
\t \t \t <select class="slim form-control"> <option>E</option><option>1</option> <option>2</option> <option>3</option> <option>4</option></select> 
 
       </div> 
 
           \t \t <div class="col-sm-4 col-xs-4" style="margin-left:-30px;"> 
 
\t \t \t <label>Lift</label> 
 
\t \t \t <select class="slim form-control"> <option>ja</option> <option>nein</option></select> 
 
      </div>   
 
\t \t </div> 
 

 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     <button id="next" type="submit" class="btn btn-info pull-right">weiter</button> 
 
     </div> 
 
    </div> 
 
        
 
      </div> 
 
</form> 
 
<hr> 
 
</div>

http://jsfiddle.net/strgga/6yanLf8q/33/

至於這個問題我不知道有什麼辦法可以把上面的標籤到位而不把輸入標籤組合在一個單獨的山坳。也許只有自定義的CSS。