兩列使用自舉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;
}
我只是想知道是否有更好的方式來做到這一點,在引導使用現有的類。
完美!謝謝。 –