水平形式直列形式的引導，同時保持原有的一切對準

我試圖同時保持所有的第一個標籤總是把COL-MD-1空間和內聯爲123456789 和價格領域做一個在線的形式與其他標籤。水平形式直列形式的引導，同時保持原有的一切對準

這裏是codepen http://codepen.io/anon/pen/pEYYEj

這裏是代碼

<!-- Latest compiled and minified CSS & JS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" style="padding: 30px 20px 20px; 
    border: 1px solid #ddd; 
    background: #fff;"> 


    <form data-toggle="validator" method="POST" enctype="multipart/form-data" action="/seller/new-listings" class="form-horizontal" novalidate="true"> 
     <div class="form-group"> 
      <label class="col-md-1 control-label">Name:</label> 
      <div class="col-md-11"> 


       <input class="maxlength-handler form-control input-xlarge" data-error="Min 2 Letters" data-minlength="2" id="name" label="False" maxlength="56" name="name" required="" type="text" value=""> 
       <div class="help-block with-errors"></div> 
      </div> 
     </div> 



    <div class="form-group"> 
     <label class="col-md-1 control-label">Description:</label> 
     <div class="col-md-11"> 
      <textarea class="maxlength-handler form-control input-xlarge" data-error="Min 20 Letters" data-minlength="20" id="description" label="False" maxlength="300" name="description" required="" style="height:100px;"></textarea> 

      <div class="help-block with-errors"></div> 
     </div> 
    </div> 


    <div class="form-group"> 
     <label class="col-md-1 control-label">123:</label> 
     <div class="col-md-11"> 
      <input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0"> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-1 control-label">456:</label> 
     <div class="col-md-11"> 
      <input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0"> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-1 control-label">678:</label> 
     <div class="col-md-11"> 
      <input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0"> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 







    <div class="form-group"> 
     <label class="col-md-1 control-label">Price:</label> 
     <div class="col-md-11"> 
      <label class="control-label" style="padding-right:5px;">1g </label> 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 


    <div class="form-group"> 
     <label class="col-md-1 control-label">Price:</label> 
     <div class="col-md-11"> 
      <label class="control-label" style="padding-right:5px;">1g </label> 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-1 control-label">Price:</label> 
     <div class="col-md-11"> 
      <label class="control-label" style="padding-right:5px;">1/8 </label> 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-1 control-label">Price:</label> 
     <div class="col-md-11"> 
      <label class="control-label" style="padding-right:5px;">1/4 </label> 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-1 control-label">Price:</label> 
     <div class="col-md-11"> 
      <label class="control-label" style="padding-right:5px;">1/2 </label> 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-1 control-label">Price:</label> 
     <div class="col-md-11"> 
      <label class="control-label" style="padding-right:5px;">1 oz </label> 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 


    <div class="col-md-1"></div> 
    <div class="form-group"> 
     <br> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-1 control-label">Stock:</label> 
     <div class="col-md-11"> 
      <input class="form-control only-numbers" data-error="Stock required" data-minlength="1" id="stock" maxlength="3" name="stock" placeholder="Total Available Inventory for sale measured by Gram" required="" type="text" value=""> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 




    <div class="form-group"> 
     <label class="col-md-1 control-label">Published:</label> 
     <div class="col-md-11"><select class="form-control" id="published" name="published"><option value="published">Published</option><option value="not_published">Unpublished</option></select></div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-1 control-label">SKU:</label> 
     <div class="col-md-11"><input class="form-control" id="sku" name="sku" type="text" value=""></div> 
    </div> 
    </form> 
    </div>

來源

2016-10-25 Holly Johnson

不太清楚，如果這就是你要找的人，但如果你把一些表單組，並更改字段申報單到col-md-1過，那麼你得到你想要的內聯場...

http://codepen.io/anon/pen/pEYYdb

<div class="form-group"> 
    <label class="col-md-1 control-label">123:</label> 
    <div class="col-md-1"> 
     <input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0"> 
     <div class="help-block with-errors"></div> 
    </div> 

    <label class="col-md-1 control-label">456:</label> 
    <div class="col-md-1"> 
     <input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0"> 
     <div class="help-block with-errors"></div> 
    </div> 

    <label class="col-md-1 control-label">678:</label> 
    <div class="col-md-1"> 
     <input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0"> 
     <div class="help-block with-errors"></div> 
    </div> 
</div>

來源

2016-10-25 20:37:29

問題與那就是引導 - 驗證庫需要在每個領域都有自己的形態組，因爲它原來的形式組紅色。這樣，當其中一個空的時候，一切都會變紅。它沒關係使用這個壽。 –

.inline-inp,.inline-inp .col-md-1,.inline-inp .col-md-11{ 
 
display:inline-block; 
 
}

<!-- Latest compiled and minified CSS & JS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" style="padding: 30px 20px 20px; 
 
    border: 1px solid #ddd; 
 
    background: #fff;"> 
 

 

 
    <form data-toggle="validator" method="POST" enctype="multipart/form-data" action="/seller/new-listings" class="form-horizontal" novalidate="true"> 
 
     <div class="form-group"> 
 
      <label class="col-md-1 control-label">Name:</label> 
 
      <div class="col-md-11"> 
 

 

 
       <input class="maxlength-handler form-control input-xlarge" data-error="Min 2 Letters" data-minlength="2" id="name" label="False" maxlength="56" name="name" required="" type="text" value=""> 
 
       <div class="help-block with-errors"></div> 
 
      </div> 
 
     </div> 
 

 

 

 
    <div class="form-group"> 
 
     <label class="col-md-1 control-label">Description:</label> 
 
     <div class="col-md-11"> 
 
      <textarea class="maxlength-handler form-control input-xlarge" data-error="Min 20 Letters" data-minlength="20" id="description" label="False" maxlength="300" name="description" required="" style="height:100px;"></textarea> 
 

 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 
<div> 
 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">123:</label> 
 
     <div class="col-md-11"> 
 
      <input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0"> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">456:</label> 
 
     <div class="col-md-11"> 
 
      <input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0"> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">678:</label> 
 
     <div class="col-md-11"> 
 
      <input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0"> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 

 
</div> 
 

 
<div> 
 

 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">Price:</label> 
 
     <div class="col-md-11"> 
 
      <label class="control-label" style="padding-right:5px;">1g </label> 
 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">Price:</label> 
 
     <div class="col-md-11"> 
 
      <label class="control-label" style="padding-right:5px;">1g </label> 
 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">Price:</label> 
 
     <div class="col-md-11"> 
 
      <label class="control-label" style="padding-right:5px;">1/8 </label> 
 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">Price:</label> 
 
     <div class="col-md-11"> 
 
      <label class="control-label" style="padding-right:5px;">1/4 </label> 
 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">Price:</label> 
 
     <div class="col-md-11"> 
 
      <label class="control-label" style="padding-right:5px;">1/2 </label> 
 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group inline-inp"> 
 
     <label class="col-md-1 control-label">Price:</label> 
 
     <div class="col-md-11"> 
 
      <label class="control-label" style="padding-right:5px;">1 oz </label> 
 
      <input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 

 
</div> 
 

 

 
    <div class="col-md-1"></div> 
 
    <div class="form-group"> 
 
     <br> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="col-md-1 control-label">Stock:</label> 
 
     <div class="col-md-11"> 
 
      <input class="form-control only-numbers" data-error="Stock required" data-minlength="1" id="stock" maxlength="3" name="stock" placeholder="Total Available Inventory for sale measured by Gram" required="" type="text" value=""> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
    </div> 
 

 

 

 

 
    <div class="form-group"> 
 
     <label class="col-md-1 control-label">Published:</label> 
 
     <div class="col-md-11"><select class="form-control" id="published" name="published"><option value="published">Published</option><option value="not_published">Unpublished</option></select></div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="col-md-1 control-label">SKU:</label> 
 
     <div class="col-md-11"><input class="form-control" id="sku" name="sku" type="text" value=""></div> 
 
    </div> 
 
    </form> 
 
    </div>

來源

2016-10-25 20:38:14

問題在於標籤位於頂部，不在襯裏內襯。 –

水平形式直列形式的引導，同時保持原有的一切對準

回答

相關問題