如何应用内部 Bootstrap/CSS 填充？答案

【问题标题】：How to apply internal Bootstrap/CSS Padding?如何应用内部 Bootstrap/CSS 填充？
【发布时间】：2015-03-12 10:27:16
【问题描述】：

嗨，我有一堆正在生成的动态 div，但我不知道如何在内部填充它们并将它们与左右边缘对齐？任何帮助将不胜感激。

【问题讨论】：

你能告诉我们你的代码吗？显示您的问题的最小代码就足够了。
至少显示一个 jsfiddle

标签： html asp.net-mvc css twitter-bootstrap

【解决方案1】：

你可以这样做：

[class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

[class*="col-"]:first-child {
  padding-left: 0px;
}

[class*="col-"]:last-child {
  padding-right: 0px;
}

您可以添加内容来包装它，否则您会将这些规则应用于布局中的所有列！

.spaced-columns [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

那么你可以使用：

<div class="spaced-columns">
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
</div>

所以你会得到你想要的间距:)

干杯

【讨论】：

【解决方案2】：

我会建议检查引导程序。为你做大部分的CSS：

http://getbootstrap.com/examples/grid/

【讨论】：

我已经在使用引导程序，只是不知道如何将它们分开
你查看我的链接了吗？
是的，但没有找到关于列间距的任何信息
井间距主要是padding或者margin。你可以用很多东西来衡量。为了让它响应，我建议使用诸如百分比之类的东西：

【解决方案3】：

您可以将您的 div 放在 <div class="col-md-4"> 中，或者您可以简单地向它添加一个类，例如：<div class="col-md-4 my-class"> 并添加一些填充，例如：

.my-class {
   padding: 10px;
}

如果您选择添加 idder div，则将填充添加到 <div class="col-md-4"> 并简单地设置您的内部 div 的样式。

<div class="col-md-4">
   <div class="my-class">Text</div>
</div>

样式如下：

.col-md-4 {
   padding: 10px;
}

.my-class {
   background: red;
}

【讨论】：

【解决方案4】：

如果您将列框包装在 a 中，您应该没问题。如果填充仍然关闭，您可以更改行的边距，然后您不需要弄乱各个列的 div。

例子

.row {margin-left:-15px;margin-right:-15px;}

【讨论】：