Question

你知道如何让文本输入占据col-md-7 div的整个宽度并位于红色div的中心（使用bootstrap）吗？

HTML：

<div class="container" style="background-color:red; padding:20px 0;">
<div class="row">
   <div class="col col-md-7" style="background-color:yellow;">
    <form class="form-inline">
      <input type="text" class="form-control input-lg" id="inlineFormInputName2" placeholder="Jane Doe"/>
    </form>

</div>

</div>

</div>

Answer 1

只需在width:100%!important;
中添加<input type="text" id="inlineFormInputName2" />即可

Update jsfiddle

#inlineFormInputName2{
  width:100%!important
}

Answer 2

将这样的类添加到输入

.w-l{
  width: 100% !important;
}

如果你看到你的css，＆＃39; .form-inline＆＃39;会让孩子“控制”＃39;要有＆＃39;宽度的项目：自动＆＃39;

@media (min-width: 576px){
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

所以，解决方案是强制输入为全宽

 <input type="text" class="form-control input-lg w-l"

Answer 3

<div class="row justify-content-center">

将解决您的问题。

我添加了jsfiddlle：

https://jsfiddle.net/nmdv2nj0/5/

忘了提 - 你需要删除那个form-inline类

中心的输入类型文本占据整个宽度

3 个答案: