两列使用自举4阿尔法6需要12柱形式,分割成6
我有一个应该是这样的一个接触的形式:
使用下面的代码,我能够得到两列6,但这些字段都是错误的。这是部分代码:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<hr width="30%">
<p>Need to get in touch? Fill in the form below for more information</p>
</div>
</div>
<div class="row">
<form class="form-inline col-md-12" role="form">
<div class="col-md-6">
<fieldset class="form-group">
<input type="email" class="form-control" id="email" placeholder="email...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="name" placeholder="name...">
</fieldset>
<fieldset class="form-group">
<input type="text" class="form-control" id="subject" placeholder="subject...">
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="form-group">
<textarea name="" id="message" rows="3" class="form-control" placeholder="message..."></textarea>
</fieldset>
<button type="submit" class="btn btn-outline-info btn-block">Submit</button>
</div>
</form>
</div>
</div>
</section>
这是形式的样子与上面的代码:
正如你所看到的,列正常分裂,但字段没有填充整个列的宽度。我在firebug中查看了它,它显示了宽度为auto的form-inline类。
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
width: auto;
}
如果我关闭宽度:auto;在firebug中,那么控件将填充六列的全部宽度。我可以通过添加一个新类,这样做在我自己的样式表解决这个问题:
.contact-control
{
width: 100% !important;
}
我只是想知道是否有更好的方式来做到这一点,在引导使用现有的类。
完美!谢谢。 –