引导行中的中心项目

我在引导行中有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。

如何正确居中这些项目？我已经尝试过利润率，但他们确实没有得到我的任何地方。

来源

2017-04-25 GTown-Coder

将'.text-center'添加到每个'.col-md-3' –

将标签置于文本区域的顶部，但我正在寻找要居中的文本区域 –

编辑：

您可以在父容器上使用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>

来源

2017-04-25 14:46:37

我更新了我的[Bootply ]（http://www.bootply.com/vfnTeLO6K9）与你的答案，但请注意，与第一个文本区域相比，在侧面的最后一个文本区域之间有多大空间？ –

啊我明白你的意思了。使用col-md-4类会出现什么格式错误？另一个选择是用'display：flex;'覆盖父容器，然后使用'justify-content：space-between' –

上一个文本区域的标签将显示在文本区域的左侧..由于其他标签的长度.. –

<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>

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

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

另外col-md-3有float：left。通过在col-md-3的div上添加style =“float：none”来解决此问题。

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

来源

2017-04-25 14:48:04 jmag

设置所有元素的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>

来源

2017-04-25 14:58:40 seven

*“这可以很容易地解决只需给每个3项目一类名称col-md-4，但这会导致格式问题“* –

在标签和textarea标签中设置100％宽度时没有格式问题。 – seven

您不知道OP计划使用的全部范围。事实上，他们已经试过这个，并说我所引用的是一个模拟答案 –

试试这个。

<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#

来源

2017-04-26 05:29:29

引导行中的中心项目

回答

相关问题