Question

我想在我的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

如果有人可以提供帮助，那可能会很棒，

提前致谢

安塞尔姆

Answer 1

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

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%;
}

正如您可能会注意到的那样，我只是摆脱浮动并通过内联替换元素属性。完成后，我可以更好地使用响应宽度。你可能会注意到！重要的定义。你可能需要也可能不需要它们（Bootstrap有一些重要的声明，所以一定要测试），但基本上我是将它应用于所有大小，所以你可能想要改变<{1}}中的 .navbar-form 到width: 50% !important;，但无论如何，在这里你可以使用工具来调整和调整

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

1 个答案: