Bootstrap 3水平表格間距

有沒有什麼辦法可以將標籤放在一起使用水平表格和下面的代碼？Bootstrap 3水平表格間距

我一直在嘗試在不同的控件上使用「左拉」，「右拉」，「無添加」，但似乎無法將它們更緊密地結合在一起。

<div class="page-header"> 
     <h1>sample</h1> 
    </div> 
    <div class="container nopadding"> 
     <div class="row"> 
      <div class="form-group nopadding"> 
       <label for="recordId" class="col-sm-2 control-label">Record Id</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" id="recordId" placeholder="Record Id"> 
       </div> 
      </div> 
      <div class="form-group nopadding"> 
       <label for="id" class="col-sm-2 control-label">Id</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" id="id" placeholder="Password"> 
       </div> 
      </div> 
      <div class="form-group nopadding"> 
       <label for="familyName" class="col-sm-2 control-label">Family Name</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"> 
       </div> 
      </div> 
     </div> 
    </div>

來源

2014-11-20 sagesky36

表單在哪裏？當放置在引導層時，這是不好構造的。要調整排水溝，請調整列類和.form-group（以水平方向）和.row（儘管.form-group在此類中充當.row）的左側和右側填充，可以使邊距爲負在左側和右側等於填充。 – Christina 2014-11-20 18:17:30

我認爲這是你想要的。

FIDDLE

您可以通過添加一個負保證金標籤減少標籤和輸入之間的空間。

CSS：

label { 
    margin-right: -20px; 
}

HTML：

<div class="page-header"> 
     <h1>sample</h1> 
    </div> 
    <div class="container nopadding"> 
      <form class="form-horizontal" role="form"> 
      <div class="form-group"> 
       <label for="recordId" class="col-sm-2 control-label">Record Id</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" id="recordId" placeholder="Record Id"></input> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="id" class="col-sm-2 control-label">Id</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" id="id" placeholder="Password"></input> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="familyName" class="col-sm-2 control-label">Family Name</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input> 
       </div> 
      </div> 
     </form> 
    </div>

而且，不知道爲什麼你在那裏曾與row類股利。應該是form標記。我已經在HTML中調整了我的答案和小提琴。

來源

2014-11-20 18:27:30 MattD

謝謝馬特！我用你的解決方案，工作正常... – sagesky36 2014-11-20 22:29:54

標籤的寬度由連接到它們的col-sm-2類決定。您可以將其修改爲col-sm-1，但這可能會導致較小設備出現問題。

儘管引導程序建議使用類似於你的方式做水平表單，但我不覺得這種方法在間距方面有很大的靈活性。

就個人而言，我會改變表格的行爲像this。因爲您在CSS中自己聲明寬度，所以可以根據需要自定義間距。這可能不會崩潰，但如果你希望你可以寫更多的CSS來處理低分辨率。

來源

2014-11-20 18:28:23 Cassie

Bootstrap 3水平表格間距

回答

相關問題