Question

使用Bootstrap 4布局系统，我可以将我的按钮与文本框对齐吗？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text"/>
  </div>
  <div class="col col-4">
    <input type="text"/>
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col">
  <input type="button" class="btn" value="Go"/>
  </div>
</div>

＆＃13;

我知道我可以继续在同一行内部并对齐文本框下的按钮......但是我需要使用新的css类来调整它们之间的间距...... 我正在寻找一个更干净的解决方案使用现有的bootsrap 4类。

Answer 1

我可能会这样做。

＆＃13;

input {
  width: 100%
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text" />
  </div>
  <div class="col col-4">
    <input type="text" />
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col-8 d-flex justify-content-end">
    <button type="button" class="btn">Go</button>
  </div>
</div>

＆＃13;

Answer 2

如果在一行中放置了超过12列，则每组额外列将作为一个单元包裹到新行上。 - Bootstrap

使用 col-8 text-right 作为按钮的列。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-8  text-right">
      <button type="button" class="btn btn-primary mt-4">Go</button>
    </div>
  </div>
</div>

＆＃13;

Answer 3

看起来你想要列之间的空间。您可以缩小（col-3）输入列的宽度，并在第二列上使用偏移量...

<div class="container-fluid">
    <div class="row justify-content-center mb-4">
        <div class="col-3">
            <input class="mx-auto form-control" type="text">
        </div>
        <div class="offset-1 col-3 text-center">
            <input class="mx-auto form-control" type="text">
        </div>
    </div>
    <div class="row justify-content-center mb-4">
        <div class="col-7 text-right">
            <input type="button" class="btn" value="Go">
        </div>
    </div>
</div>

https://www.codeply.com/go/S33dvwVZxv

Answer 4

使用表单网格系统。在表单标记之后添加.form-row类。然后可以非常轻松地正确对齐按钮

是否可以使用bootstrap 4在右侧添加偏移量？

4 个答案: