twitter-bootstrap 如何响应地更改 Bootstrap 中 .input-group 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29568914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the width of an .input-group in Bootstrap, responsively?
提问by Chloe
How do I change the width of an .input-groupto make it wider? I tried setting width: 50%but that puts a space between the input field and the button.
如何更改 a 的宽度.input-group以使其更宽？我尝试设置，width: 50%但在输入字段和按钮之间放置了一个空格。
I also tried setting the width of the input field directly, but that also failed.
我也尝试过直接设置输入字段的宽度，但也失败了。
And setting it over 100%, which also failed.
并将其设置为 100% 以上，这也失败了。
It looks good if I set the width to 300px or 400px, but not on mobile.
如果我将宽度设置为 300px 或 400px 看起来不错，但不是在移动设备上。
Here is a Bootply http://www.bootply.com/HGr9b06Q1B
这是一个 Bootply http://www.bootply.com/HGr9b06Q1B
回答by Ted
You need to wrap it in bootstraps structure... like:
您需要将其包装在引导程序结构中...例如：
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4"><!--width is set by this div -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div><!-- /input-group -->
</div>
</div>
</div>
Oh, and try not to use the <center>element, it has been deprecated.
哦，尽量不要使用该<center>元素，它已被弃用。
回答by Wasim Ahmad
i will recommend the easiest way to do that is style .form-controland another way can be you can nest your input inside <div class='col-sm-3'> </div>
我会推荐最简单的方法是风格.form-control，另一种方法是你可以将你的输入嵌套在里面<div class='col-sm-3'> </div>
