Question

我搜索了很多，我找不到答案

我使用 bootstrap 4 ，我有以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<form class="form-inline text-xs-center">
  <div class="form-group">
    <input type="text" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Go</button>
</form>

我在diffirent 分辨率时遇到两个问题。

（1） sm或更高分辨率，结果如下：

click for image

输入和按钮是内嵌，它们之间有正确的填充，并且居中。如何增加此内联输入的宽度，同时保留填充和中心对齐（两个控件一起）？

（2） xs resoltion ，结果如下:(展开代码段，运行代码并调整浏览器大小）

click fo image

我丢失了表单的内联状态，如何在此分辨率下保持表单内联？

提前致谢

Answer 1

使用最新的 Bootstrap 4.0.0 重新审视此问题。

现在flexbox在Bootstrap 4中，可以使用自动布局列轻松完成，这些列缩小以适合宽度（col-auto），或增长到填充宽度（col）。

https://www.codeply.com/go/4XzeaA9eGl

<div class="container">
    <form class="row text-center">
        <div class="col pr-1">
            <input type="text" class="form-control">
        </div>
        <div class="col-auto px-0">
            <button type="submit" class="col-auto btn btn-primary"> Go </button>
        </div>
    </form>
</div>

Bootstrap 4内联形式增加输入宽度并使表单内嵌在xs宽度上

1 个答案: