引导缩略图按钮未正确对齐答案

【问题标题】：bootstrap thumbnail buttons not aligning properly引导缩略图按钮未正确对齐
【发布时间】：2017-03-20 17:11:51
【问题描述】：

我正在使用引导缩略图on my page from here。

 <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</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>

所有这些缩略图在段落中都有不同的内容，即“<p>...</p>”。这会导致对齐以下按钮的问题。一些按钮向上移动，一些向下移动。我尝试使用“<br/>”标签，但它们不起作用，并且在不同的浏览器上显示不同的结果。

注意：共有 8 个缩略图。上排4个，排4个。

【问题讨论】：

不明白你不明白什么？请添加更多说明..
@MinalChauhan 你不明白什么？
您的内容不固定，所以您的按钮在列中的某个位置没有正确对齐？
@MinalChauhan 是的。我需要所有按钮都在同一行。
所以需要给第一个p标签加上固定高度...

标签： html css twitter-bootstrap

【解决方案1】：

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

工作示例

.p_info {
  min-height: 330px;
}

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

【讨论】：

【解决方案2】：

只需定义<p>first 子元素的高度并设置属性overflow:scroll。

这是jsfiddle demo的例子

【讨论】：

【解决方案3】：

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

style='vertical-align: bottom;'

【讨论】：

【解决方案4】：

你可以使用

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

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

【讨论】：

对不起，我忘了提到总共有 8 个缩略图。一排4个，下面4个。
你给我的案例代码工作正常..你的确切问题是什么..你想分享一些sn-p

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

只需把p标签的width打上

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

【讨论】：