两个相邻的输入字段 bootstrap 3

Posted 2023-03-05

【中文标题】两个相邻的输入字段 bootstrap 3

【英文标题】：Two input field next to each other bootstrap 3

【发布时间】：2016-05-20 20:52:33

【问题描述】：

我是 bootstrap 新手，在将两个输入字段并排放置时遇到问题。我在互联网（和 bootstrap.com）上搜索过，但找不到分析器。

代码：

结果。但我需要输入字段和按钮在一行中彼此相邻：

我尝试使用列...没有用

【参考方案1】：

您可以关注：Display two fields side by side in a Bootstrap Form

<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>

【讨论】：

感谢您的快速评论。我使用了您的示例，发现“输入组错误”。我已将其更正为：“form-incline”。我在tutorialrepublic.com/twitter-bootstrap-tutorial/…

上找到了它

【参考方案2】：

你可以试试下面的代码

<div class="container content">
    <div class='row'>
        <form role="form" class="form-horizontal" method="post">
            <div class='col-xs-12 col-sm-4'>
                <div class="form-group">
                    <input class="form-control" name="" placeholder="Search from this date">
                </div>
            </div>
            <div class='col-xs-12 col-sm-4'>
                <div class="form-group">
                    <input class="form-control" name="" placeholder="Search till this date">
                </div>
            </div>
            <div class='col-xs-12'>
                <div class="form-group">
                    <button class="btn btn-primary">Search</button>
                </div>
            </div>
            <div class='col-xs-12'>
                <div class="form-group">
                    <a href="link">Back</a>
                </div>
            </div>
        </form>
    </div>
</div>