填充到行的右侧

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％的宽度，然后将其覆盖为希望全宽的（希望数量有限）特定子项。