【问题标题】:how to center form using bootstrap 4如何使用引导程序 4 使表单居中
【发布时间】:2017-10-05 00:55:02
【问题描述】:

我刚刚学习了引导程序并尝试使用引导程序 4 使表单居中,但似乎一直失败。我尝试过放置容器、自动边距、网格等,但仍然失败。

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

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

【问题讨论】:

    标签: html css twitter-bootstrap


    【解决方案1】:

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

    【讨论】:

    • 这里是 v4.3 文档的链接:Horizontal Alignment
    • 代码 sn-p 并不完全正确,因为在 bootstrap V4 中不再存在 offset-lg-3。更多的容器应该包装一个“行”,并且一行应该有直接的“col”子级。查看我的答案stackoverflow.com/a/46560435/1152632 以获得正确的引导代码(我也是第一个答案:))
    【解决方案2】:

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

    等等。

    【讨论】:

      【解决方案3】:
      1. 列在行内,而不是相反
      2. 偏移属性来自 Bootstrap 3 而不是 Bootstrap 4。You should use margin offsets instead

      这样的:

      <form class="row">
          <div class="col-lg-6 ml-auto">
      

      【讨论】:

        猜你喜欢
        • 2020-11-01
        • 1970-01-01
        • 2016-12-26
        • 2021-05-29
        • 1970-01-01
        • 2019-03-25
        • 2014-07-20
        • 2019-05-24
        • 2019-04-13
        相关资源
        最近更新 更多