水平フォーム

を揃え、すべてを維持しながら、すべての最初のラベルを維持することは常に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にdivを、そしてあなたは、インライン化するフィールド...

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

その通報は、ブートストラップということです - それは、フォーム・グループの赤を回すので、バリデータライブラリは、独自のフォームグループを持つように、各フィールドを必要としています。この方法では、いずれかが空のときにすべてが赤に変わります。その大丈夫な病気はこのthoを使います。 –

.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

この問題は、ラベルが一番上にあり、裏打ちされていないことがあります。 –

水平フォーム

答えて

関連する問題