在中心输入类型文本占据整个宽度答案

【问题标题】：input type text at center occupying the full width在中心输入类型文本占据整个宽度
【发布时间】：2017-09-14 07:35:19
【问题描述】：

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

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>

【问题讨论】：

标签： css

【解决方案1】：

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

会解决你的问题。

我添加了jsfiddlle：

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

忘了提 - 您还需要删除该表单内联类

【讨论】：

也许他需要 'form-inline' 类来输入另一个输入，所以，你的解决方案将不起作用

【解决方案2】：

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

Update jsfiddle

#inlineFormInputName2{
  width:100%!important
}

【讨论】：

!important 总是坏主意。
id 不需要重要。

【解决方案3】：

将这样的类添加到输入中

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

如果你看到你的 CSS，'.form-inline' 将使子 '.form-control' 项目具有 'width:auto'

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

【讨论】：

你永远不应该使用 !important，除非它真的很重要 :)
它必须是 '!important'，因为 bootstrap 会覆盖 '.w-l' 类，除非他将自定义 CSS 放在 bootstrap 之后，否则它必须是 '!important！ :)
检查我为此编写的解决方案，他使用的是引导程序 4，因此他需要以正确的方式解决它！重要总是解决方法。
您刚刚从“form”标签中删除了“form-inline”类，这就是您的解决方案有效的原因，因为“form-control”是 100% 宽度，但不在“form-inline”内'
form-inline 应该是用来在一行显示多个元素的，他只有一个元素，自然不需要。有关更多信息，请查看文档：v4-alpha.getbootstrap.com/components/forms