水平形式与内联形式bootstrap同时保持一切对齐
我正在尝试为123 456 789执行内联表单
保留所有第一个标签时的价格和价格字段始终采用col-md-1空格并与其他标签一致。
以下是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>
2 个答案:
答案 0 :(得分：1)
不太确定这是否是您正在寻找的内容，但如果您放弃某些表单组并将字段div更改为col-md-1，那么您将获得要内联的字段... < / p>
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>
答案 1 :(得分：1)
.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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？