引导边距 - 断行答案

【问题标题】：Bootstrap margin - Broken rows引导边距 - 断行
【发布时间】：2015-07-27 22:40:08
【问题描述】：

您好，我刚开始使用 Bootstrap 框架。

我有这个 Html

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img src="http://placehold.it/100x100" class="img-responsive">
        </div>
        <div class="col-md-6 text-right text-uppercase">
           <h1>Jane Doette</h1>
          <h3>Front-end Ninja</h3>

          </div>
        </div>
      <div class="row">
        <div class="col-md-12">
          <img src="http://placehold.it/1140x350"  class="img-responsive">
        </div>
      </div>
      <div class="col-md-12">
        <h2>Featured Work</h2>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="http://placehold.it/555x300"class="img-responsive">
          <h3>Appify</h3>
          <p>
            <a href="http://github.com">Link to project</a>
          </p>
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/555x300"class="img-responsive">
          <h3>Appify</h3>
          <p>
            <a href="http://github.com">Link to project</a>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="http://placehold.it/555x300"class="img-responsive">
          <h3>Appify</h3>
          <p>
            <a href="http://github.com">Link to project</a>
          </p>
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/555x300"class="img-responsive">
          <h3>Appify</h3>
          <p>
            <a href="http://github.com">Link to project</a>
          </p>
        </div>
      </div>
    </div>
  </body>

</html>

我想在标题的右边加一些边距，

---------------------------
| Image         Title ++ Margin
|                          | 
|                          |
|                          |
----------------------------

如果我尝试在另一个 css 类中添加一些类，例如

.testclass{
margin-right:xxpx/zz%;
}

然后我创建了一个 div 我把我将div的类设置为tesclass，结果一团糟！我也尝试直接在 html 中设置 div 的样式，但结果仍然相同。我真的不明白如何处理引导程序中列内的边距和填充属性。

【问题讨论】：

如果要在标题右侧添加边距，为什么要设置左侧边距？
对不起，我写错了，我当然想要右边距

标签： html css twitter-bootstrap

【解决方案1】：

您可以通过以下方式在右侧添加空格或边距：

<div class="row">
        <div class="col-md-6">
          <img src="http://placehold.it/100x100" class="img-responsive">
        </div>
        <div class="col-md-5 text-right text-uppercase">
           <h1>Jane Doette</h1>
          <h3>Front-end Ninja</h3>
        </div>
        <div class="col-md-1"></div>
</div>

或者您可以将 padding-right: XXpx; 添加到带有文本的 col-md-6 中。

【讨论】：

所以你的意思是我也可以在 col-6 中使用一个段落，我在他的样式中添加了 padding-right 属性？
不不，padding属性应该添加到列中，而不是Coogle内部的元素