Bootstrap对齐水平表单和按钮

Question

我一直在为我的第一个 Web 开发项目添加最后的润色。这是我第一次使用引导程序，我花了几个小时阅读帖子和文章，但没有成功。我已经发布了我的 html sn-p 以及我尝试过的相关 css 代码。

<div class="col-lg-7">
    <form class="form-horizontal" role="search">
        <div class="col-lg-12"> 
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search Calendar">
                <!--<span class="input-group-addon"> -->
                <button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
                <!--</span>-->
            </div>
        </div>
    </form>
</div>

CSS：

.col-lg-7{
    float: left;
}

.col-lg-7 .form-horizontal{
    width:80%;
    float:left;
}

.col-lg-12 .form-group .form-control .{
    float:left;
}

我不太明白为什么我的搜索表单和按钮类没有对齐。引导类是否有明确的修复程序？如您所见，我已经尝试浮动所有剩余的东西，但这并不能解决我的问题。您还将看到我也尝试使用 input-group-addon 类；但是，这使我的搜索表单看起来像是垂直的，而不是水平的。

如果有人能带领我朝着正确的方向前进，将不胜感激！

Answer 1

您可以将 Bootstrap 按钮组与插件一起使用。

<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
           <button class="btn btn-primary" type="button">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
           </button>
        </span>
    </div>
</div>

https://jsbin.com/quwasitane/edit?html,css,output

希望它对你有用！！！！

Answer 2

尝试类表单内联

<div class="col-lg-7">
                <form class="form-inline" role="search">
                    <div class="col-lg-12"> 
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search Calendar">
                            <!--<span class="input-group-addon"> -->
                            <button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
                            <!--</span>-->
                        </div>
                    </div>
                </form>
            </div>

暂时注释掉 css，bootstrap 将拥有所需的 css

Answer 3

首先，尝试使用引导类而不是你的样式，如果他们无法响应你，那么使用你的样式。 对于浮动，你可以使用，拉左/右类，对于宽度，你不需要使用你的样式，100% 的 div 或元素是 col-(xs/sm/md/lg)-12 ，它从 col-md-1 到 12，使用这些类而不是你自己的样式。

bootstrap 有这样的 clearfix ：<div class="clearfix"></div>