twitter-bootstrap Bootstrap:如何使输入框和按钮保持在同一行?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18798625/
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
Bootstrap: How do I make the input box and button stay on the same line?
提问by Melisa
I'm helping with a website and learning all of these skills as I go. I saw similar questions but did not find a helpful resolution.
我正在帮助建立一个网站,并边走边学习所有这些技能。我看到了类似的问题,但没有找到有用的解决方案。
You can see on the upper right of this screenshot that the search box and button refuse to be on the same line. http://i.imgur.com/fiurnYs.png
您可以在此屏幕截图的右上角看到搜索框和按钮拒绝在同一行。 http://i.imgur.com/fiurnYs.png
HTML code for the search box looks like this:
搜索框的 HTML 代码如下所示:
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="icon-search"> </i></button>
</div>
</div>
</form>
</div>
CSS code looks like this: https://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css
CSS 代码如下所示:https: //raw.github.com/immenselyalive/dresswithease/master/bootstrap.css
回答by James Bruckner
You could use the supplied block of code from the docs as a baseline for your code.
您可以使用文档中提供的代码块作为代码的基线。
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
http://getbootstrap.com/2.3.2/base-css.html#forms(search for Buttons instead of text)
http://getbootstrap.com/2.3.2/base-css.html#forms(搜索Buttons instead of text)

