html - 如何将一些字段水平放置而其他字段垂直放置在 Bootstrap 表单中

Question

我有一个 Bootstrap 表单，我希望其中一些字段是水平的，而其他字段是垂直的。在底部的 fiddle 中，我希望 field 1 和 field 2 位于同一行，但具有默认大小(未拉伸(stretch))。该按钮应位于中心但在单独的行中。我应该如何在 Bootstrap 中实现这一目标？我尝试调整文本字段的大小，但没有用。此外，该按钮没有放置在中心，并且离上方的表单字段太近了。 table 在这里是个好主意吗？请帮我解决这个问题。

fiddle :http://jsfiddle.net/r30kk8m4/

Answer 1

HTML

<div class="container-fluid">
    <form class="form" role="form">        
        <div class="form-group">
            <div class="row">
                <div class="col-sm-6 col-md-6 col-xs-6">
                    <input type="text" class="form-control" placeholder="Field 1" />
                </div>
                <div class="col-sm-6 col-md-6 col-xs-6">
                    <input type="text" class="form-control" placeholder="Field 2" />
                </div>
            </div>
        </div>
                <div class="form-group text-center">
            <div class="row">
                <input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
            </div>
        </div>
    </form>
</div>

工作 fiddle http://jsfiddle.net/r30kk8m4/1/

更新你可以让你的按钮响应

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}