Question

我无法摆脱引导行单元格的左边距。在我看来，如果左边有另一个元素，即使没有显示该元素，元素也会显示其左边距。阅读代码中的评论。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" type="text/css">
</head>
<body>

<div class="container-fluid">
    <div class="row-fluid">

       <div class="span12 visible-tablet">Tablet</div>
        <!-- These two elements never show together. One of them always
             has "display: none." Because of the not displayed element above,
             the left margin of the bottom element appears that screws up the
             layout. If I delete the element above, everything is fine. -->
        <div class="span12 visible-desktop">Desktop</div>

    </div>
</div>

<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Answer 1

实现您想要的第一种方法是将两个布局（桌面，平板电脑）与两个<div class="row-fluid">分开，如下面的代码所示：

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span12 visible-tablet">Tablet</div>
    </div>
    <div class="row-fluid">
        <div class="span12 visible-desktop" >Desktop</div>
    </div>
</div>

另一种方法是在第二个div中明确地将边距设置为零，如下所示：

<div class="span12 visible-desktop" style="margin: 0;" >Desktop</div>

Answer 2

问题与响应部分无关。

boostrap.css第419行说：

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

:first-child不会忽略隐藏/不可见元素，因此您无法保留此标记。

我用

#some-parent .span12.visible-desktop {
    margin-left: 0;
}

可能有一个唯一的父容器（#some-parent），就像我here一样。

未显示的元素会显示边距

2 个答案: