导航栏引导程序中的搜索栏宽度+偏移量答案

【问题标题】：Searchbar width in navbar bootstrap + offset导航栏引导程序中的搜索栏宽度+偏移量
【发布时间】：2014-11-07 19:24:24
【问题描述】：

我想在我的 boostrap 导航栏中增加我的输入类型文本的宽度，并使其保持响应，但不知道该怎么做。似乎完全不可能这是代码示例 http://www.bootply.com/klx0LnIMF9

我曾经看过这个帖子： Bootstrap 3 - How to maximize input width inside navbar

事实上，Bass Jobsen 给出的代码是完全相同的代码，不知何故它适用于 bootstrap 3.0.0，但不适用于 bootstrap 3.2.0

如果有人可以提供帮助，那就太好了，

提前致谢

安塞尔

【问题讨论】：

标签： css twitter-bootstrap-3 navbar

【解决方案1】：

嗯，这与您在该链接中的解决方案不同，只是我为这个问题所做的快速修复，可能需要进行一些调整以满足您的需求，但请查看您的 forked example

你的 HTML 中只有一个微小的变化（你根本不需要的内联样式，它比有用更烦人）和一些 CSS，如下所示：

.navbar-form {
    padding:0;
    margin-right: 0px;
    margin-left: 0px;
    display: inline-block;
    width: 50% !important;
    border: 0px none;
}
.form-group {
    width:100%;
}
.input-group-addon:first-child {
    border-right: 0px none;
    width: 30px !important;
}
.navbar-form .input-group {
    vertical-align: middle;
    display: inline-table;
    width: 100%;
}

您可能会注意到，我只是去掉了浮动并用内联替换元素属性。一旦完成，我就有能力更好地使用响应宽度。您可能会注意到 !important 定义。您可能需要也可能不需要它们（Bootstrap 有一些 !important 声明，因此请务必进行测试），但基本上我将其应用于所有尺寸，因此您可能希望在 中更改 width: 50% !important;。 navbar-form 到width: 100% !important; 768px 及以下，但无论如何，这里有工具可以随意调整和调整

【讨论】：

感谢法比奥！它真的帮助了我；我以前知道一点 css，但是当涉及到响应式和 % 时，我只是迷路了......再次感谢