以下是我的问题的截图:
这是我的代码:
<html>
<body>
<!-- <div class="col-sm-3 col-md-6 col-lg-8"> -->
<div class="row">
<!-- <div class="center-block" style="width: 100px; background-color:#ccc; "> -->
<div class="col-md-3 gam1" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<img src="D:\Website\bootstrap-3.2.0-dist\Images\Garuda.jpg">
</div>
</div>
<div class="col-md-9 center-block" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<h4>Here is the running text</h4>
<div class="row">
<div class="col-md-9 " style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<p>Garuda is Indonesian symbol.
</p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
Bootstrap期望一行中的列总数等于12.当你告诉它创建3列宽的内容时,它仍然为其他9列留出空间。您可以使用偏移量将事物连续移动。例如,“col-md-3 col-md-offset-3”将使元素3列宽,并将其向右移动三列。
http://getbootstrap.com/css/#grid-offsetting
以3列宽为中心的东西是棘手的事情,数学不均匀。如果偏移4列,它将离左边太远。如果偏移5列,它将向右偏移太远。您可以将图像设置为4列宽并偏移4,或者您可以完全跳过使用列,只需将图像显示为块并将边距设置为自动两侧即可使图像居中。
这是一个快速演示:http://jsfiddle.net/hnxrxow0/1/
HTML:
<div class="row">
<div class="col-md-12">
<img class="center" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/200px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" alt="Mona Lisa"/>
</div>
</div>
CSS:
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
将文本置于图片下方的最简单方法是在该div上放置一个“文本中心”类。同样,你将无法使用Bootstrap的网格系统将9行宽的东西居中,因为数学。