html - Bootstrap 行中的中心元素

Question

我在 Bootstrap 行中有 3 个元素。只需为 3 个元素中的每一个都指定一个类名 col-md-4 即可轻松解决此问题，但这会导致格式问题。

这是我的代码:

<div class="container body-content">

  <form class="well form-inline" style="width: 100%;">

    <div class="row" style="margin:auto">
    <div class="form-group col-md-3" style="width: 31%;">
      <label class="control-label">Maintenance:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
   </div>

   <div class="form-group col-md-3" style="width: 31%;">
      <label class="control-label">Operations:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
   </div>

    <div class="form-group col-md-3" style="width: 31%;">
      <label class="control-label">Safety:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
    </div>

  </div>


</form>

</div>

Here is a bootply .

如何正确地将这些元素居中？我试过利润率，但他们真的没有得到我的任何地方。

Answer 1

编辑:

您可以使用 display: flex; justify-content: space-between;在父容器(包含 3 .col-md-3 )上实现您想要的。

---

您只需添加 .text-center 即可完成此操作给你的每一个.col-md-3元素。这将使所有元素居中。

如果你想单独居中文本区域，你可以这样做:

<div class="text-center"><textarea class="form-control" cols="34" rows="10"></textarea></div>