Question

嗨，我在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，但结果仍然相同。我真的不明白如何处理bootstrap中列内的边距和填充属性。

Answer 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。

Bootstrap边距 - 断行

1 个答案: