在Bootstrap中，將兩個項目組合在一起

Question

在Bootstrap中，我如何強制兩個項目 - 一個標籤和一個文本框 - 充當一個不可分割的組，以便它們始終顯示在同一行，並且永遠不會被破壞，在一行的末尾添加標籤並在下一行的開頭添加文本框？

Answer 1

我認爲這是你想要完成的（除了將class="form-horizontal"添加到form元素主要是調整列大小（即xs-3，sm-9，md-1等）以查看內容基於你的標籤字符長度是有意義的

大部分包含你的CSS都不需要實現這個;它以頁面爲中心，否則輸入將變成列的寬度，也是背景由於您的表單可能會因固定在一側的標籤而開始崩潰，因此表單的顏色將會發生變化。

所有這些東西都可以調整適用於您需要的方式。

#boostrapForm .control-label { 
 
    text-align: right; 
 
    padding-right: 0px; 
 
} 
 
#boostrapForm input[type=text], 
 
#boostrapForm input[type=email], 
 
#boostrapForm input[type=password], 
 
{ 
 
    margin-left: -7px; 
 
} 
 
.formCenter { 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.formCenter.formChange { 
 
    min-width: 300px; 
 
    max-width: 500px; 
 
    padding: 25px; 
 
} 
 
@media (max-width: 768px) { 
 
    .formCenter.formChange { 
 
    width: 100%; 
 
    } 
 
} 
 
@media (max-width: 359px) { 
 
    form { 
 
    background: #f00; 
 
    color: #fff; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="formCenter formChange"> 
 
    <form class="form-horizontal" id="boostrapForm"> 
 
     <div class="form-group"> 
 
     <label for="inputEmail3" class="col-xs-3 control-label">Email</label> 
 
     <div class="col-xs-9"> 
 
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email" /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="inputPassword3" class="col-xs-3 control-label">Password</label> 
 
     <div class="col-xs-9"> 
 
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password" /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <div class="col-xs-offset-3 col-xs-9"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox">Remember me</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <div class="col-xs-offset-3 col-xs-9"> 
 
      <button type="submit" class="btn btn-default">Sign in</button> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>