css - 填充到行的右侧

Question

我正在使用 twitter bootstrap 2（响应式）进行设计。在这个设计中，我有一个页眉、左侧边栏、内容和页脚。

基本上，我有以下代码结构 - 看看http://jsfiddle.net/w4yh9/3/

重要的部分是：

<div id="inner" class="span10">
...
</div>

请看一下随附的屏幕截图，尤其是黄色标记区域：

我有以下问题/问题：如何在所有内容元素（成功消息、内容、表格）的右侧添加一些填充 - 它也应该在较小的屏幕上工作？

Answer 1

我会给父容器一个填充，并对其应用 box-sizing:border-box 。查看我的 JSFiddle：http: //jsfiddle.net/w4yh9/4/

#main {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #FFF;
    border-radius: 4px;
}

.span10 {
    padding-right: 10px;
    box-sizing: border-box; 
}

Answer 2

你可以尝试使用

#main {padding-right:5px}

但也许这#main比你想要的更广泛。

在这种情况下，您可以使用

#main > div { width:98%; }
#main > .navbar {width:100%; }

将 main 的所有子 div 设置为 98% 宽度，然后为您想要全宽的（希望数量有限的）特定子级覆盖它。