Twitter自舉水平表單元素在一條線上

我想讓我的一些元素在一條線上是水平的，但是我的引導技巧還不夠。Twitter自舉水平表單元素在一條線上

<div class="tab-pane fade" id="create"> 
    <div class="modal-header"> 
     <h1 class="text-center" id="login-tit">Register</h1> 
    </div> 
    <form id="tab"> 
     <div class="form-group"> 
      <label class="reg-form-left">First Name</label> 
      <input type="text" class="form-control" > 
     </div><br /> 
     <div class="form-group" style="margin-top:-22px;"> 
      <label class="reg-form-left">Last Name</label> 
      <input type="text" value="" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label class="reg-form-left">Email</label> 
      <input type="text" value="" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label class="reg-form-left">Password</label> 
      <input type="text" value="" placeholder="6 - 20 characters" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label class="reg-form-left">Password again</label> 
      <input type="text" value="" class="form-control"> 
     </div> 
     <div class="control-group"> 
      <label class="reg-form-left control-label">Street/Nr</label> 
      <div class="controls-row"> 
      <div class="controls col-sm-8"> 
       <input type="text" value="" class="form-control"> 
      </div> 
      <div class="controls col-sm-1"> 
       <p style="font-size:24px;">/</p> 
      </div> 
      <div class="controls col-sm-3"> 
       <input type="text" value="" class="form-control"> 
      </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-5"> 
      <label class="reg-form-left">Postal code/City</label> 
      <input type="text" value="" class="form-control"> 
     </div> 
     <div class="form-group col-xs-6"> 
      <input type="text" value="" class="form-control"> 
     </div> 
     <div class="register-btn"> 
      <button class="btn btn-primary">Create Account</button> 
     </div> 
     </form> 
    </div>

我有這樣的形式：

enter image description here

但我想這一點：

enter image description here

這將是非常好的，如果有人可以幫助我實現我想要的。

來源

2015-06-07 ninjaxelite

你可以發佈工作[的jsfiddle（http://jsfiddle.net） –

忘了小提琴！我什至不能告訴你從屏幕截圖中想要什麼。你可以添加一個說明什麼是錯的聲明，確切地說在哪裏？ PS：Fiddles或者Plunkers總是不錯:) –

我想要在街道/ Nr的輸入文本在同一行上的底部圖像的形式 – ninjaxelite

您需要先了解一些事情 -

每次使用浮筒或類似CSS定位時，它會影響下面的元素現在沒有定義新的元素的位置。
當您使用col-*屬性時，它會將默認填充添加到元素。對於路線，您需要首先將您的內容打包到row以避免此問題。

這裏的修復程序代碼的最後幾行

<div class="control-group"> 
    <label class="reg-form-left control-label">Street/Nr</label> 
    <div class="controls-row"> 
    <div class="row"> 
     <div class="controls col-sm-8"> 
     <input type="text" value="" class="form-control"> 
     </div> 
     <div class="controls col-sm-1"> 
     <p style="font-size:24px;">/</p> 
     </div> 
     <div class="controls col-sm-3"> 
     <input type="text" value="" class="form-control"> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="form-control"> 
    <div class="row"> 
    <div class="form-group col-xs-5"> 
     <label class="reg-form-left">Postal code/City</label> 
     <input type="text" value="" class="form-control"> 
    </div> 
    <div class="form-group col-xs-6"> 
     <input type="text" value="" class="form-control"> 
    </div> 
    <div class="register-btn"> 
     <button class="btn btn-primary">Create Account</button> 
    </div> 
    </div> 
</div>

來源

2015-06-07 17:50:38 Bikas

Twitter自舉水平表單元素在一條線上

回答

相關問題