CSS：保证金问题

Question

另一个简单的CSS问题可能。我们来看看吧！

我们正在使用Bootstrap将信息项放在网格中。

每当我试图避免浅蓝色边框线触及左侧容器边框（带阴影的边框）时，在包含border-bottom属性的类中添加一些左边距，单词＆＃34; Servidores＆＃34;错过了它的位置并向右跑。这是因为增加了额外的保证金。

有没有办法缩短边框线而不为内部内容添加额外的边距？

编辑：根据要求添加一些代码：

<div class="
            <div class="col-md-4"> 
                <span class="titulo-paneles">CALIDAD</span><span id="calidad-subtitulo" class="goleft titulo-2"></span>
                <div class="row custom-padding-row borde-inferior">
                    <div class="col-md-6 col-xs-6 borde-derecho custom-height text-center"><span id="MES_SLA_DESC" class="titulo-1-small" data-toggle="tooltip">SLA - mes</span><span id="MES_SLA" class="datos-big-info goleft modal-launcher-calidad cursorManito" data-title="SLA MENSUAL" data-id="MES_SLA"  data-toggle="tooltip" title="Ver detalle">-</span></div>
                    <div class="col-md-6 col-xs-6 custom-height text-center"><span id="HOY_SLA_DESC" class="titulo-1-small" data-toggle="tooltip">SLA - hoy</span><span id="HOY_SLA" class="datos-big-info goleft modal-launcher-calidad cursorManito" data-title="SLA DE HOY" data-id="HOY_SLA"  data-toggle="tooltip" title="Ver detalle">-</span></div>
                </div>
                <div class="row custom-padding-row borde-inferior-grueso custom-margin-bottom">
                    <div class="col-md-3 col-xs-3 text-left borde-derecho custom-height"><div id="SERVERS_DESC" class="titulo-1-small" data-toggle="tooltip" style="font-size: 15px">Servidores</div><span id="SERVERS" class="datos-big-info modal-launcher-calidad noTieneDetalles" data-title="Servers" data-id="SERVERS"  data-toggle="tooltip" title="Ver detalle">-</span></div>
                    <div class="col-md-3 col-xs-3 text-center borde-derecho custom-height"><div id="GRANJAS_DESC" class="titulo-1-small" data-toggle="tooltip">Granjas</div><span id="GRANJAS" class="datos-big-info  modal-launcher-calidad noTieneDetalles" data-title="Granjas" data-id="GRANJAS"  data-toggle="tooltip" title="Ver detalle">-</span></div>
                    <div class="col-md-3 col-xs-3 text-center borde-derecho custom-height"><div id="BD_DESC" class="titulo-1-small" data-toggle="tooltip">BD</div><span id="BD" class="datos-big-info  modal-launcher-calidad noTieneDetalles" data-title="BD" data-id="BD"  data-toggle="tooltip" title="Ver detalle">-</span></div>
                    <div class="col-md-3 col-xs-3 text-center custom-height"><div id="RED_DESC" class="titulo-1-small" data-toggle="tooltip">Red</div><span id="RED" class="datos-big-info  modal-launcher-calidad noTieneDetalles" data-title="Red" data-id="RED"  data-toggle="tooltip" title="Ver detalle">-</span></div>
                </div>

相关CSS：

.borde-inferior{
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;

}

.borde-inferior-grueso{
padding-bottom: 10px;
border-bottom: 2px solid #2aabd2;
margin-left: 3px;
margin-right: 3px;

}

Answer 1

有几种方法可以做到。

Hacky方式

从div#SERVERS_DESC及其父级删除左侧填充，根据您提供的代码，应该好。

不那么黑客的方式

您可能希望在行下插入<hr/>元素：

        <div class="row custom-padding-row borde-inferior-grueso custom-margin-bottom">
            <div class="col-md-3 col-xs-3 text-left borde-derecho custom-height"><div id="SERVERS_DESC" class="titulo-1-small" data-toggle="tooltip" style="font-size: 15px">Servidores</div><span id="SERVERS" class="datos-big-info modal-launcher-calidad noTieneDetalles" data-title="Servers" data-id="SERVERS"  data-toggle="tooltip" title="Ver detalle">-</span></div>
            <div class="col-md-3 col-xs-3 text-center borde-derecho custom-height"><div id="GRANJAS_DESC" class="titulo-1-small" data-toggle="tooltip">Granjas</div><span id="GRANJAS" class="datos-big-info  modal-launcher-calidad noTieneDetalles" data-title="Granjas" data-id="GRANJAS"  data-toggle="tooltip" title="Ver detalle">-</span></div>
            <div class="col-md-3 col-xs-3 text-center borde-derecho custom-height"><div id="BD_DESC" class="titulo-1-small" data-toggle="tooltip">BD</div><span id="BD" class="datos-big-info  modal-launcher-calidad noTieneDetalles" data-title="BD" data-id="BD"  data-toggle="tooltip" title="Ver detalle">-</span></div>
            <div class="col-md-3 col-xs-3 text-center custom-height"><div id="RED_DESC" class="titulo-1-small" data-toggle="tooltip">Red</div><span id="RED" class="datos-big-info  modal-launcher-calidad noTieneDetalles" data-title="Red" data-id="RED"  data-toggle="tooltip" title="Ver detalle">-</span></div>
        </div>
        <!-- Here is your new border -->
        <hr class="borde-inferior"/>

和css：

hr.borde-inferior {
    border-color: #2aabd2;
    border-width: 2px;
    width: 95%; /* Adjust here */
}