我如何划分附在此处的图像部分以获得引导程序支持?

时间:2015-11-08 13:58:35

标签: html css

强调文字:

enter image description here

您好,

我是bootstrap的新手。我现在正在学习。我不明白如何划分html bootstrap的图像部分。你能帮我吗?

由于

1 个答案:

答案 0 :(得分:1)

您可以尝试此JSfiddle Demo

代码段

body {
  background: #EBEBEB;
}
.box {
  text-align: center;
  -webkit-box-shadow: 0px 1px 17px -5px rgba(0, 0, 0, 0.63);
  -moz-box-shadow: 0px 1px 17px -5px rgba(0, 0, 0, 0.63);
  box-shadow: 0px 1px 17px -5px rgba(0, 0, 0, 0.63);
  padding: 15px 20px;
  margin: 10px auto;
  color: #888888;
  background: #FFFFFF;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.box:hover {
  transform: scale(1.2);
  color: #7B2FC0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.box i {
  font-size: 25px;
  margin-bottom: 5px;
}
.box h3 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-2">
      <div class="box">
        <i class="fa fa-diamond"></i>
        <h3>Title</h3>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="box">
        <i class="fa fa-diamond"></i>
        <h3>Title</h3>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="box">
        <i class="fa fa-diamond"></i>
        <h3>Title</h3>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="box">
        <i class="fa fa-diamond"></i>
        <h3>Title</h3>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="box">
        <i class="fa fa-diamond"></i>
        <h3>Title</h3>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="box">
        <i class="fa fa-diamond"></i>
        <h3>Title</h3>
      </div>
    </div>
  </div>
</div>