html - bootstrap 减少行间距

Question

Bootstrap 3.3.5

我正在尝试减少行之间的间距:

我尝试在行上添加删除边距和填充，但似乎没有任何改变:

<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; border: solid 1px red; padding-top: 0px !important; padding-bottom: 0px !important;">

这些是消除间距的可能解决方案，但似乎对我不起作用。

代码如下:

<div class="container-fluid">


    <div class="row" style=" border: solid 1px red; overflow: hidden; ">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">

            <form class="form-horizontal">
                <div class="form-group" style="">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Start Total:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="startCount" readonly="readonly" style="">
                    </div>
                </div>
            </form>

        </div>

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left ">
            <form class="form-horizontal">
                <div class="form-group">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Inmate Total:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="total" readonly="readonly" style="">
                    </div>
                </div>                  

            </form>
        </div>

        <div class="clearfix"></div>

    </div>

    <div class="row" style="">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">

            <form class="form-horizontal">
                <div class="form-group" style="">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Booked:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="book" readonly="readonly">
                    </div>
                </div>
            </form>

        </div>


        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left">

            <form class="form-horizontal">
                <div class="form-group" style="">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Out House:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="house" readonly="readonly">
                    </div>
                </div>
            </form>

        </div>




        <div class="clearfix"></div>

    </div>

</div>

更新:1

如果我将行样式修改为具有以下内容:

style="margin-bottom: -10px !important; padding-bottom: -10px !important; margin-top: -10px !important; padding-top: -10px !important; outline: solid 1px green;"

行是轮廓确实向上移动但空间仍然存在

Answer 1

问题是 .form-group 应用了边距。要覆盖，请将其添加到您的 CSS 或在 Bootstrap 的 CSS 代码中更改它。

.form-group {
  margin-bottom: 0;
}

演示:http://www.bootply.com/lKW7vRzS6d