twitter-bootstrap 如何在引导程序中使用 css（而不是 JS）向 span 的内容添加填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15834341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How could I add padding to span's contents using css (not JS) in bootstrap?
提问by Enrique
I've a bootstrap site, where I defined a background image for BODY, size=cover; which works fine in almost all modern browsers.
我有一个引导程序站点，在那里我为 BODY、size=cover; 定义了一个背景图像；在几乎所有现代浏览器中都可以正常工作。
Then I've defined a structure like this:
然后我定义了一个这样的结构：
<div class="row">
<div class="span12">
<div class="span1"> </div>
<div class="span5">CONTACT_FORM_CONTENT</div>
<div class="span5">MAP_ETC_CONTENT</div>
<div class="span1"> </div>
</div>
</div>
Now, some shots to see how it looks:
现在，一些镜头来看看它的样子：
While viewing in desktop browser
在桌面浏览器中查看时
While viewing in smartphone
在智能手机中查看时
The problem
问题
While viewing the website in desktop browser, all is ok. Each "< span1 >" at left/right act as padding at left/right correctly, but when viewing with smartphone, these "< span1 >" are transformed and placed at top/bottom of my content and padding at left/right dissapears.
在桌面浏览器中查看网站时，一切正常。左侧/右侧的每个“< span1 >”都正确地充当左侧/右侧的填充，但是当使用智能手机查看时，这些“< span1 >”被转换并放置在我的内容的顶部/底部，并且左侧/右侧的填充消失了。
Does anyone have an idea how to solve this without using JS? I'd like to correct the entire website with just some css changes.
有没有人知道如何在不使用 JS 的情况下解决这个问题？我想通过一些 css 更改来更正整个网站。
Thanks
谢谢
回答by Hai Nguyen
You can accomplish this by padding the Form Content like this:
您可以通过像这样填充表单内容来完成此操作：
CSS:
CSS：
.padded { padding: 10px; }
HTML:
HTML：
<div class="row">
<div class="span12">
<div class="span1"> </div>
<div class="span5">
<div class="padded">
CONTACT_FORM_CONTENT
</div>
</div>
<div class="span5">MAP_ETC_CONTENT</div>
<div class="span1"> </div>
</div>
</div>
回答by Gabriel Hansen
Wrap your div.row in a div.container. No CSS needed. Now when you go to mobile and it collapses the empty div's, the .container class will maintain padding around your div's. This is ideal, since it gets rid of the excess whitespace to take advantage of screen space, but maintains padding.
将 div.row 包裹在 div.container 中。不需要 CSS。现在，当您转到移动设备并折叠空的 div 时，.container 类将在您的 div 周围保持填充。这是理想的，因为它消除了多余的空白以利用屏幕空间，但保持填充。
Also, there's no need for the div.span1's with empty content. Instead, remove them, and add an .offset1 to your first div.span5.
此外，不需要 div.span1 的内容为空。相反，删除它们，并将 .offset1 添加到您的第一个 div.span5。
Also, when nesting span's in another span, you need to enclose it in another div.row. But in this case we can drop the div.span12 entirely, since the inner row adds up to 12 (Bootstrap is "left" aligned, so you don't have to implicitly fill space to the right, and counts towards your total of 12 cells).
此外，当在另一个跨度中嵌套跨度时，您需要将其包含在另一个 div.row 中。但在这种情况下，我们可以完全删除 div.span12，因为内行加起来为 12（引导程序是“左”对齐的，因此您不必隐式填充右侧的空间，并计入您的总数 12细胞）。
And if you want a span12 further down the page, just add another div.row underneath, followed with a div.span12. They only need be contained in the div.container. Style the div.container to add your background color.
如果您想要在页面下方的 span12，只需在下方添加另一个 div.row，然后再添加一个 div.span12。它们只需要包含在 div.container 中。设置 div.container 的样式以添加您的背景颜色。
If you want to adjust the padding on the div.container, you're really going to want to edit the Bootstrap LESS files, which is another ball of wax and learning curve. Adjusting padding directly throws a bunch of other measurements out of whack, and you'd end up needing to adjust a bunch of stuff to compensate. But I think you'll find the default padding suitable.
如果您想调整 div.container 上的内边距，您真的需要编辑 Bootstrap LESS 文件，这是另一个需要学习的过程。直接调整填充会导致一系列其他测量失灵，你最终需要调整一堆东西来补偿。但我认为你会发现默认的填充是合适的。
<div class="container" style="background-color:white;">
<div class="row">
<div class="span5 offset1">CONTACT_FORM_CONTENT</div>
<div class="span5">MAP_ETC_CONTENT</div>
</div>
</div>
