TwitterBootstrap中的图像位置

时间:2014-10-11 16:43:46

标签: html twitter-bootstrap

  • 我想使用bootstrap css创建一个网站。
  • 我想让横幅(图片)居中并符合方块的大小
  • 我想定义第一个框(横幅/图像)只有3列,但为什么我把任何不同的列号放在一起,它总是有相同的宽度?
  • 我想在横幅下面制作正在运行的文字,怎么做?
  • 我想说“Garuda是印尼的象征”。正在运行。

以下是我的问题的截图:

screenshot

这是我的代码:

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

1 个答案:

答案 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行宽的东西居中,因为数学。