Question

我一直坚持为我的第一个网络开发项目添加最后润色。这是我第一次使用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>

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

尝试使用class-inline

<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

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

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

Bootstrap对齐水平形式＆amp;按钮

3 个答案: