Question

我正在尝试将内容集中在bootstrap的中心，我搜索并找到了解决方案，这对我不起作用，有人可以帮助我，

<style>
   .center{
      margin:0 auto;
   }
</style>

<div class="center">
  <form method="post" action="" enctype="multipart/form-data">
    <div class="row">
      <div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <label for="name">Book Name</label>
        <input type="text" name="name" class="form-control" id="name">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <label for="author_id">Author</label>
        <select name="author_id" class="form-control" id="author_id">
          <option value="author_id">Author</option>
        </select>
      </div>
    </div>
  </form>
</div>

Answer 1

为了使.center div与margin: 0 auto;居中，它还需要设置width值。默认情况下，div占用其容器宽度的100％。如果div是100％宽，则它不能居中，因为它在技术上已经在中心。你可以给.center一个宽度来解决这个问题......

.center {
    width: 400px;
    margin:0 auto;
}

你可能不想要一个固定的宽度，事实上我说你肯定不想要那个，因为你正在使用一个响应模板...

更好的解决方案是使内容居中，而不是div容器。

尝试将text-align: center;添加到form-group课程，或者使用text-align: center;创建自己的课程，然后将该课程添加到HTML标签/输入的分组中。< / p>

.form-group {
    text-align: center;
}

将表单置于引导程序中3

1 个答案: