bootstrap减少行之间的间距

Question

Bootstrap 3.3.5

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

我试过添加删除边距＆amp;在行上填充但似乎没有改变任何东西：

<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中，或者在CSS代码中将其更改为bootstrap。

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

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

Answer 2

嗯，很有可能当你将它设置为0px时，它已经是0px。如果你想强迫它变小，请提供负值。