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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:23:27  来源:igfitidea点击:

Bootstrap: How do I make the input box and button stay on the same line?

htmlcsstwitter-bootstrap

提问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