html - Bootstrap margin - 断行

标签 html css twitter-bootstrap

大家好,我刚开始使用 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的class设置成tesclass,结果一塌糊涂! 我也尝试直接在 html 中设置 div 的样式,但结果仍然相同。 我真的不明白如何处理 Bootstrap 中列内的边距和填充属性。

最佳答案

您可以通过执行以下操作在右侧添加空格或边距:

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

关于html - Bootstrap margin - 断行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30269098/

相关文章:

html - 如何在 Firefox 和 Chrome 中实现相同的行高?

css - 删除react-native-material-dropdown中的边框底部

html - 如何在 css 中制作图片作为我的背景

html - Bootstrap 固定导航栏,带有收缩 Logo ,位于导航栏上方

css - 为什么 bootstrap 将 '!important' 用于响应类?

javascript - JPA ng-repeat 过滤器 - 多个 id 作为一个

javascript - Jquery 与 Javascript : getting css style object shows different result

javascript - 如果 div 中存在元素,则 Jquery 添加类

html - 如何让我的 Logo 覆盖蓝色横幅?

javascript - 从 USB 运行 webapps