如何使用 Bootstrap 确保 html 组元素水平和垂直对齐？

Question

我需要为用户提供某些选项以供选择。我有一个 checkbox、一个 checkbox text、一个 dropdown 和另一个 checkbox。将有一堆，我需要将它们以水平放置的方式放下，直到占据整个屏幕，然后下一组与上一组的第一个复选框垂直对齐。这是我分享的 jsfiddle https://jsfiddle.net/tmpceqy3/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="checkbox-inline">
  <input type="checkbox">India
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">America
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Australia
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">England
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Holland
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Greece
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Egypt
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">France
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

<div class="checkbox-inline">
  <input type="checkbox">Japan
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>&nbsp&nbsp&nbsp
  <input type="checkbox">
</div>

这是目前的样子

如您所见，我每行有一组 html 个元素 (checkbox, checkbox text, dropdown, checkbox)。我使用 &nbsp 在 dropdown 和 checkbox 之间创建了 space，因为它们都出现在另一个之上。

现在我想将它们水平放置，直到占据全屏。然后下一组应出现在下一行，但与上一行中每个组的第一个复选框垂直对齐。

我试过类似 display: flex 的东西，结果如下

它可以将其分成多行，但复选框搞砸了。

怎样才能达到预期的效果？

Answer 1

请像这样在 parent 中添加 class 和 CSS，我在 jsfield 中也做了更改，你也可以在那里查看这里是 link：https://jsfiddle.net/cgaL462s/：

    <div class="parent">
        <div class="checkbox-inline">
          <input  type="checkbox">India
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">America
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Australia
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">England
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Holland
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Greece
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Egypt
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">France
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>

        <div class="checkbox-inline">
          <input  type="checkbox">Japan
          <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
          <input  type="checkbox">
        </div>
        </div>

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.checkbox-inline {
  margin-bottom: 20px;
}

Answer 2

对 fiddle 进行了一些更改并获得了预期的结果。下面有link到fiddle.

https://jsfiddle.net/9qfh0yum/

  .parent {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-inline {
  width : 170px;
  margin-bottom: 20px;
}


<div class="parent">
    <div class="checkbox-inline">
      <input  type="checkbox">India
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">America
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Australia
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">England
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Holland
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Greece
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Egypt
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">France
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>

    <div class="checkbox-inline">
      <input  type="checkbox">Japan
      <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option> </select>
      <input  type="checkbox">
    </div>
 </div>

Answer 3

使用 flex 时，您需要为子项添加弹性值。这让他们知道 space 他们应该接受什么。

示例如下：

P.S。请确保您在输入中使用 name id 和 for 属性，以便浏览器知道您想要做什么。

fiddle: https://jsfiddle.net/kvL8f5h0/1/

更改 window 的宽度以查看它如何在两个柱体之间切换。

HTML

<h1>As a list</h1>
<div>
  <div class="checkbox-inline">
    <div>
      <label for="india">
        <input id="india" name="india" type="checkbox" />
        India
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="America">
        <input id="America" name="America" type="checkbox" />
        America
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Australia">
        <input id="Australia" name="Australia" type="checkbox" />
        Australia
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="England">
        <input id="England" name="England" type="checkbox" />
        England
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Holland">
        <input id="Holland" name="Holland" type="checkbox" />
        Holland
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

<hr />
<h1>Now in a row / responsive</h1>
<div class="row">
  <div class="checkbox-inline">
    <div>
      <label for="india">
        <input id="india" name="india" type="checkbox" />
        India
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="America">
        <input id="America" name="America" type="checkbox" />
        America
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Australia">
        <input id="Australia" name="Australia" type="checkbox" />
        Australia
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="England">
        <input id="England" name="England" type="checkbox" />
        England
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>

  <div class="checkbox-inline">
    <div>
      <label for="Holland">
        <input id="Holland" name="Holland" type="checkbox" />
        Holland
      </label>
    </div>
    <select name="cars">
      <option value="" disabled selected>Select make</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</div>

CSS

.checkbox-inline {
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  width: 300px;
  margin-bottom: 8px;
}

.checkbox-inline>* {
  flex: 1;
  margin-right: 8px;
}

.checkbox-inline>select {
  flex: 2;
}


.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}

Answer 4

您对输入元素的奇特风格没有体现出来，但这不是这里的问题。我将标签放在一个标签中，这样我就可以为它们添加一些样式。

您的结果可能会因上述差异而有所不同。

.my-checkbox-container {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-inline {
  height: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 12em;
  border: 1px solid #dddddd;
}

.checkbox-inline>select {
  margin-right: 1em;
}

.checkbox-inline label {
  width: 3em;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="container my-checkbox-container">
  <div class="checkbox-inline">
    <input type="checkbox"><label>India</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>America</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox">Australia
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>England</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Holland</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Greece</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Egypt</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>France</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>

  <div class="checkbox-inline">
    <input type="checkbox"><label>Japan</label>
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="checkbox">
  </div>
</div>

如何使用 Bootstrap 确保 html 组元素水平和垂直对齐？

How to ensure groups of html elements are aligned horizontally and vertically using Bootstrap?

html

css

flexbox

twitter-bootstrap-3