html - CSS: margin 问题

Question

也许是另一个简单的 CSS 问题。让我们看看!

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

每当我试图避免浅蓝色边框线接触左容器边框(带阴影的边框)时，向包含 border-bottom 属性的类添加一些左边距时，“Servidores”一词会错过它的位置并运行向右。这是因为增加了额外的 margin 。

有没有办法在不给内部内容增加额外边距的情况下缩短边框线？

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

<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

有几种方法可以做到这一点。

黑客方式

从 div#SERVERS_DESC 中删除左侧填充及其父级，根据您提供的代码，您应该可以开始了。

不那么hacky的方式

您可能想插入一个 <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 */
}