html - 使用 Bootstrap 容器时，div 没有固定大小

Question

我目前正在尝试创建一组 div。它们中的内容将是动态的，所以我想为每个设置一个固定的。就目前而言，每个盒子的尺寸都不同。我想利用 max-width，但没能成功。我希望无论屏幕大小如何，除了每个 .role 的大小相同之外，所有内容的行为都相同。请注意，父 container 是一个 Bootstrap container。这是我的 jsFiddle

编辑:我希望所有 div 的大小都相同。理想情况下，如果每个框都是最大框的大小(动态内容插入到 p 和 headers 中)，那就太好了。

index.html

<div class="container">
    <div class="role-list">
    <div class="role">
        <h3>Firefighter - The Best of the best</h3>
        <p>He is a great and I know that he loves his job.
        He is a great and I know that he loves his job
            He is a great and I know that he loves his job
            He is a great and I know that he loves his job

        </p>
    </div>
        <div class="role">
        <h3>Firefighter </h3>
        <p>He is a great and I know that he loves his job</p>
    </div>    
        <div class="role">
        <h3>Firefighter </h3>
        <p>He is a great and I know that he loves his job</p>
    </div>    
        <div class="role">
        <h3>Firefighter - The Best of the best</h3>
        <p>He is a great and I know that he loves his job
             He is a great and I know that he loves his job
            He is a great and I know that he loves his job
            </p>
    </div>   
    </div>
</div>

CSS

.role {
  display: inline-block;
  width: 47%;
  margin: 10px 10px;
  padding: 2%;
  vertical-align: top;
  background: #fff;
  border: 1px solid #ebebeb;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

Answer 1

您应该能够通过向您的 css 添加一个最小宽度来完成此操作。将以下内容添加到 CSS 中的 .role 中。您可以将最小宽度设置为您喜欢的任何大小。

min-width: 400px;

为了实现相同大小的框，您需要设置 width 和 height CSS 属性。这可能会有点棘手，因为如果内容长于尺寸可以处理的长度，那么它将拉伸(stretch) div，除非您将溢出设置为滚动。

jsFiddle