Boostrap中心内联输入，它们之间没有空间

Question

我使用 float：left 删除多个输入字段之间的间距和提交按钮。

但我不知道如何将这个孔块保持在页面的中心位置。

这是一个小提琴：https://jsfiddle.net/bb61c412/43/

代码：

  .form-control {

    float: left;

    border-radius: 0px;

  }

  .btn {

    float: left;

    border-radius: 0px;

  }

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">

  <div style="background-color:white;width:100%;height:100%;">

    <div style="margin-left:30px;margin-right:50px;padding-top:30px;">

      <form>
        <div class=form-inline style='text-align:center;'>
          <select name="Form1" class="form-control">
            <option value="0">Form1</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form2" class="form-control">
            <option value="0">Form2</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form3" class="form-control">
            <option value="0">Form3</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <button type="submit" class="btn btn-default">Submit</button>

        </div>


      </form>


    </div>

  </div>

</div>

Answer 1

删除浮动并改为使用flexbox。

JSfiddle Demo

.form-control {
  border-radius: 0px;
}
.btn {
  border-radius: 0px;
}
.form-inline {
  display: flex;
  justify-content: center;
}

.form-control {
  border-radius: 0px;
}
.btn {
  border-radius: 0px;
}
.form-inline {
  display: flex;
  justify-content: center;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">

  <div style="background-color:white;width:100%;height:100%;">

    <div style="margin-left:30px;margin-right:50px;padding-top:30px;">

      <form>
        <div class=form-inline style='text-align:center;'>
          <select name="Form1" class="form-control">
            <option value="0">Form1</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form2" class="form-control">
            <option value="0">Form2</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <select name="Form3" class="form-control">
            <option value="0">Form3</option>
            <option value="1">Option2</option>
            <option value="2">Option3</option>
          </select>

          <button type="submit" class="btn btn-default">Submit</button>

        </div>


      </form>


    </div>

  </div>

</div>

否则您必须查看How to remove the space between inline-block elements?

Answer 2

请试试这个：

变化：

<div style="margin-left:30px;margin-right:50px;padding-top:30px;">

到

<div style="margin: 0px auto; padding-top: 30px; width: 427px;">

Answer 3

最佳做法是在关闭正文标记之前将所有.js个文件或CDN放在HTML的底部。

您希望最后渲染.js脚本以帮助您的资产管道。