Question

我有一个引导程序表单，我希望某些字段是水平的，而其他字段是垂直的。在底部的小提琴中，我希望field 1和field 2在同一行但是默认大小（未拉伸）。按钮应位于中心但位于单独的行中。我应该如何在bootstrap中实现这一目标？我尝试调整文本字段的大小，但它没有工作。此外，按钮不是放在中心，而是太靠近上面的表单字段。桌子在这里好主意吗？请帮帮我。

小提琴：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>

工作小提琴 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;
  }
}

Answer 2

修改您的布局（已移除.row，移动按钮以分隔.form-group），应用一些clear: both;。由于按钮是内联元素，因此您可以应用text-align: center;（不推荐<center>）。

＆＃13;

.no-gutter-left {
  padding-left: 0 !important;
}
.no-gutter-right {
  padding-right: 0 !important;
}
.clear {
  clear: both;
}
.tac {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <form class="form" role="form">
    <div class="form-group">
      <div class="col-xs-6 no-gutter-left">
        <input type="text" class="form-control" placeholder="Field 1" />
      </div>
      <div class="col-xs-6 no-gutter-right">
        <input type="text" class="form-control" placeholder="Field 2" />
      </div>
      <div class="clear"></div>
    </div>
    <div class="form-group tac">
      <input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
    </div>
  </form>
</div>

＆＃13;

如何将某些字段设置为水平，而其他字段在引导程序窗体内垂直放置

2 个答案: