Jquery 引导对齐水平形式&；按钮

我一直在为我的第一个web开发项目做最后的润色。这是我第一次使用bootstrap，我花了几个小时阅读帖子和文章，但都没有成功。我已经发布了我的html代码片段以及我尝试过的相关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>

我不太明白为什么我的搜索表单和按钮类没有对齐。是否有针对引导类的clearfix？正如你们所看到的，我试着把剩下的东西都漂浮起来，但这并不能解决我的问题。您还将看到，我也尝试使用输入组插件类；然而，这使我的搜索表单看起来像是垂直的，而不是水平的

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

尝试类表单内联

<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首先，尝试使用bootstrap类而不是ur样式，如果它们不能响应u，那么使用ur样式。 对于浮动，你可以使用，拉左/右类，对于宽度，你不需要使用你的样式，div或元素的100%是col-（xs/sm/md/lg）-12，它从col-md-1到12，使用这些类而不是你自己的样式

---

引导程序有如下clearfix:

您可以将引导程序按钮组与插件一起使用

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

---

希望它对你很好

非常感谢你！我意识到css确实是我最大的痛点。自从发帖以来，我使用严格的引导从零开始重新启动，一切都变得更加顺利。您的修复将我的搜索按钮与我的表单对齐；然而，现在这两个加在一起只占大约2个网格列。有什么线索吗？很高兴我能帮忙：）试着用

替换

参考[link]和[link]在col-lg-7中，lg表示大屏幕尺寸，7表示列数。希望这有帮助：）我意识到css确实是我最大的痛点。自从发帖以来，我使用严格的引导从零开始重新启动，一切都变得更加顺利。谢谢你的建议，也谢谢你指导我去上澄清课。非常感谢你！！！这正是我想要实现的。我的朋友帮了大忙！没关系，朋友，如果你在这方面需要其他帮助，请告诉我。

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