Question

我正在使用bootstrap排列行和列。所以使用bootstrap的行类但不能排列列和行。这是我的代码

<div class="container">
  <div class="row">
    <div class=" col-md-4 " style="float:left;padding-left:0;padding-right:0">
      <div>
        <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
      </div>
      <div class="tip">
        <h3><a href="#"  title="Elgen i baksetet">Test block1</a></h3>
        <em><a href="#">AAAA</a></em>	
        <p>Test paragraph 1</p>
      </div>
    </div>
    <div class=" col-md-4 " style="float:left;padding-left:0;padding-right:0">
      <div>
        <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
      </div>
      <div class="tip">
        <h3><a href="#>Test block 2</a></h3>
        <em><a href="#">BBBB</a></em>	
        <p>New paragraph</p>
      </div>
    </div>
    <div class="  col-md-4 " style="float:left;padding-left:0;padding-right:0">
      <div>
        <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
      </div>
      <div class="tip">
        <h3><a href="#">New title</a></h3>
        <em><a href="#">Title block 3</a></em>	
        <p>Paragraph</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class=" col-md-4 " style="float:left;padding-left:0;padding-right:0">
      <div>
        <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
      </div>
      <div class="tip">
        <h3><a href="#">Title3</a></h3>
        <em><a href="#">Title block 4</a></em>

        <p>Paragrpah start</p>
      </div>
    </div>
    <div class=" col-md-4 " style="float:left;padding-left:0;padding-right:0">
      <div>
        <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
      </div>
      <div class="tip">
        <h3><a href="#">FFFFFFFFFFF</a></h3>
        <em><a href="#">GGGGGGGGG</a></em>

        <p>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</p>
      </div>
    </div>
    <div class="  col-md-4 " style="float:left;padding-left:0;padding-right:0">
      <div>
        <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
      </div>
      <div class="tip">
        <h3><a href="#" title="Leasingforløpet">Gdddfdf</a></h3>
        <em><a href="#">aaagr</a></em>

        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </div>
    </div>
  </div>
</div>

这里是Fiddle

行和列正在混合。有人能告诉我如何解决它

Answer 1

我稍微更改了你的HTML和CSS（参见小提琴中的HTML）

.tip {
  background: #eee;
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.tip:hover {
  height:100%;
  transition:all .5s;
}

.tip .text {
  height: 0;
  overflow: hidden;
}

.tip:hover .text {
  height: 100%;
}

.img-responsive {
  margin-top: 20px;
  padding-bottom: 0px;
}

.relative {
  margin-bottom: 80px;
  position: relative;
}

这是你想要的：Fiddle？

无法按行和列排列

1 个答案: