大家好,我刚开始使用 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/