Question

我在Bootstrap 3（最新版本）中有一个4列水平格式：

   <div class="container">
      <div class="row">
         <div class="col-xs-12">
            <h1>Title is here</h1>
         </div>
      </div>
      <div class="row">
     <div class="col-xs-12 no-gutter">
        <form class="form-horizontal">
           <div class="col-md-3">
              <input type="text" class="form-control input-lg" placeholder="Your Title">
           </div>
           <div class="col-md-3">
              <input type="text" class="form-control input-lg" placeholder="Your Title">
           </div>
           <div class="col-md-3">
              <input type="text" class="form-control input-lg" placeholder="Your Email Address">
           </div>
           <div class="col-md-3">
              <button type="submit" class="form-control input-lg btn-danger">Check The Price</button>
           </div>
        </form>
     </div>
  </div>

以下CSS（使输入字段彼此相邻）：

.col-xs-12.no-gutter [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

这是问题所在。我希望按钮更小（因为它需要2列而不是3列）。所以我将最后<div>从col-md-3更改为col-md-2并获得了此信息： http://www.bootply.com/JiNeG04Ifl

代码与上面的粘贴代码相同，只是将上一个<div>更改为col-md-2。现在，尝试将视口的大小从1194px调整为992px（窗体切换到垂直后的中等大小）。您会注意到文本溢出了框，尽管按钮本身有足够的空白区域。

我该如何解决这个问题？到目前为止，我已经尝试过：

white-space: nowrap;

但问题是文本没有保持在框中心，它的对齐似乎正在消失。有没有更好的解决方案来保持对齐中心？

Answer 1

从按钮中删除l / r填充...

.input-lg.btn-danger {
   padding-left: 0;
   padding-right: 0;
}

http://www.bootply.com/QkBiP8yHNE

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

/* CSS used here will be applied after bootstrap.css */

.margin-bottom-30 {
  margin-bottom: 30px;
}

.margin-top-30 {
  margin-top: 30px;
}

.col-xs-12.no-gutter [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

* {
  border-radius: 0 !important;
}

.input-lg.btn-danger {
  padding-left: 0;
  padding-right: 0;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 class="margin-bottom-30">Title Here</h1>
    </div>
  </div>
  <div class="row no-gutter">
    <div class="col-xs-12 form no-gutter">
      <form class="form-horizontal">
        <div class="col-md-3">
          <input type="text" class="form-control input-lg" placeholder="Your Title">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control input-lg" placeholder="Your Title">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control input-lg" placeholder="Your Email Address">
        </div>
        <div class="col-md-2">
          <button type="submit" class="form-control input-lg btn-danger">Check The Price</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div id="push"></div>

＆＃13;

如何使最后一个水平表单按钮更小

1 个答案: