如何使用Bootstrap 4居中 [英] how to center form using bootstrap 4

问题描述

我刚刚学习了引导程序，并尝试使用引导程序4将表单居中，但是似乎一直失败.我尝试将容器，边距自动设置，网格等放入，但是仍然失败.

I just learned bootstrap and try to centered a form using bootstrap 4 but seems keep failing. I've try put container, margin auto, grid, etc but still failing.

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

Here is the last code using bootstrap 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/

推荐答案

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

这篇关于如何使用Bootstrap 4居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！