是否可以使用引导程序4在右侧添加偏移量？

Question

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

<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>
  

我知道我可以在同一行中保持所有内容并对齐文本框下方的按钮...但是然后我需要使用新的CSS类调整它们之间的间距... 我一直在寻找使用现有的bootsrap 4的更干净的解决方案类。

Answer 1

看起来您想要列之间有空间。您可以缩小 (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