1

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

<!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>
4

2 回答 2

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>
于 2013-09-15T15:19:38.603 回答
0

问题与响应部分无关。

boostrap.css 第 419 行说：

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

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

我会用

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

可能有一个独特的父容器（#some-parent），就像我在这里做的那样。

于 2013-09-15T15:23:12.323 回答