在 Bootstrap 3 中增加绝对位置元素的表单输入宽度答案

【问题标题】：Increasing form input width for a position absolute element in Bootstrap 3在 Bootstrap 3 中增加绝对位置元素的表单输入宽度
【发布时间】：2014-07-20 07:57:08
【问题描述】：

我正在尝试增加 Bootstrap 3 中表单组的输入元素的宽度。根据this answer，我可以通过将col 属性应用于包含输入元素的 div 来控制宽度。

表单具有绝对位置，我认为这就是阻止它改变宽度的原因。删除绝对位置允许我增加宽度。如何增加元素的宽度？

这是我的代码

<form id="search_bar" class="navbar-form navbar-left">
    <div class="form-group col-md-6" id="dj-search">
        <input type="text" class="form-control typeahead" placeholder="Search favourite DJs" autocomplete="off">
    </div>
</form>

这是一个JSFiddle 。

【问题讨论】：

设置宽度适用于您的小提琴jsfiddle.net/MeycD/446
@Vector 这很奇怪。如果我在我的项目中尝试同样的事情，它只是将整个 div 以该宽度向右移动，但输入元素的宽度保持不变。
如果您发布链接，我可以快速查看

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将你的两个.form-control 类的宽度设置为你想要的值。

【讨论】：

【解决方案2】：

您可能应该将“左”与“右”相加。像这样。左右调整宽度。

#search_bar {
  position: absolute;
  right: 40px;
  left:40px;
}

Here is your fiddle with changes made

【讨论】：