Question

我使用的是bootstrap缩略图on my page from here。

<p>...</p>

所有这些缩略图在段落中都有不同的内容，即“<br/>”。这引起了对齐下面按钮的问题。一些按钮向上移动，一些向下移动。我尝试使用“position:absolute”代码，但它们不起作用，并在不同的浏览器上显示不同的结果。

注意：总共有8个缩略图。它排在上排4排，排成4排。

Answer 1

您可以使用p标签的最小高度来实现它，并且最小高度应该大于最大标题内容的高度---

工作示例

＆＃13;

.p_info {
  min-height: 330px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div class="col-sm-12 col-md-12">
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>

  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>


  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>

  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>

  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit....Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit
        non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit....Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula
        ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

只需定义<p>第一个孩子的身高并设置属性overflow:scroll。

这是示例jsfiddle demo

Answer 3

只需添加width代码的p

即可

<p style="width:some width">...</p>

Answer 4

您需要在图片和段落标记上添加min-height和max-height，这样它们都会占用相似的空格，然后您的所有button都会完美对齐。

Answer 5

尝试将此内联样式添加到按钮

style='vertical-align: bottom;'

Answer 6

你可以使用

<div class="col-sm-6 col-md-4 col-md-offset-3">

将按钮对齐到特定位置我建议你把按钮放在不同的行

Answer 7

.caption p { 
    height: 42px; /*set the height*/
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

bootstrap缩略图按钮未正确对齐

7 个答案: