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

<强> 编辑：

您可以在父容器（包含3 display: flex; justify-content: space-between;）上使用.col-md-3来实现您所追求的目标。

只需将.text-center添加到每个.col-md-3元素即可。这将集中所有元素。

如果您希望单独居中文本区域，可以执行以下操作：

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

Answer 2

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">

  <form class="well form-inline text-center" style="width: 100%;">



    <div class="row" style="margin:auto">
    <div class="form-group col-md-3" style="float:none">
      <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="float:none">
      <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="float:none">
      <label class="control-label">Safety:</label>
      <textarea class="form-control" cols="34" rows="10"></textarea>
      <label>250 characters left</label>
    </div>

  </div>


</form>

</div>

＆＃13;

在父容器中添加文本中心。以全屏模式查看。

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

col-md-3也有浮动：留下它。通过添加style =＆＃34; float：none＆＃34;来解决这个问题。在col-md-3的div上。

    <div class="form-group col-md-3" style="float:none">

Answer 3

在所有元素中设置100％宽度表示label，textarea。并将col-md-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-4" >
      <label class="control-label" style="width:100%;" >Maintenance:</label>
      <textarea class="form-control"  rows="10" style="width:100%;" ></textarea>
      <label style="width:100%;" >250 characters left</label>
   </div>

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

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

  </div>


</form>

</div>

Answer 4

试试这个。

<div class="container">

  <form>
     <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <label>Maintenance:</label>
            <textarea class="form-control" cols="34" rows="10"></textarea>
            <label>250 characters left</label>
          </div>
        </div>
        <div class="col-md-4">
            <label>Operations:</label>
            <textarea class="form-control" cols="34" rows="10"></textarea>
            <label>250 characters left</label>
        </div>
        <div class="col-md-4">
            <label>Safety:</label>
            <textarea class="form-control" cols="34" rows="10"></textarea>
            <label>250 characters left</label>
        </div>
    </div>
</form>

</div>

这是链接。 http://www.bootply.com/tvCIHTOdAE#

Bootstrap行中的中心项

4 个答案: