如何使用 bootstrap 4 居中表单

新手上路,请多包涵

我刚刚学习了 bootstrap 并尝试使用 bootstrap 4 将表单居中,但似乎一直失败。我试过 put container、margin auto、grid 等,但仍然失败。

这是使用引导网格的最后一个代码。

 <form class="col-lg-6 offset-lg-3">
    <div class="row">
        <input type="text" placeholder="Example input">
        <span class="input-group-btn">
            <button class="btn btn-primary">Download</button>
        </span>
    </div>
</form>

这是链接 https://jsfiddle.net/artjia/emsw7t93/

原文由 bakaio 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 545
2 个回答

使用 justify-content-center

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
 <form class="col-lg-6 offset-lg-3 ">
   <div class="row justify-content-center">
     <input type="text" placeholder="Example input">
     <span class="input-group-btn">
       <button class="btn btn-primary">Download</button>
     </span>
   </div>
 </form>

原文由 Farhad Bagherlo 发布,翻译遵循 CC BY-SA 3.0 许可协议

使用 CSS 类 justify-content-center 。 offset-col-* css 类在 V4 引导程序中不再存在。现在它使用弹性网格。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">
     <form>
      <input type="text" placeholder="Example input">
      <span class="input-group-btn">
        <button class="btn btn-primary">Download</button>
      </span>
     </form>
     </div>
  </div>
</div>

有关详细信息,请参阅文档 => https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

Et voilà。

原文由 rdhainaut 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题