javascript - 如何在 Bootstrap 中连续获得相同大小的列？

Question

请不要将此视为重复问题，因为类似问题中提供的方法似乎不起作用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">    
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=407%C3%97832&w=407&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>Apple iPhone 6 (Space Grey, 16 GB)</h4>
          <p>500</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97562&w=832&h=562" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>HP Core i3 5th Gen - (4 GB/1 TB HDD/DOS) X5Q17PA 15-be005TU Notebook  (15.6 inch, Turbo SIlver, 2.19 kg)</h4>
          <p>350</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=40&txt=424%C3%97832&w=424&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>Redmi Note 3 (Dark Grey, 16 GB)</h4>
          <p>50</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97539&w=832&h=539" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>HP Pavilion Celeron Dual Core - (2 GB/500 GB HDD/DOS) W0H99PA 11-S003TU Notebook  (11.6 inch, Black, 1.23 kg)</h4>
          <p>350</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我正在尝试获得相同尺寸的外箱。

请查看全屏输出以了解。

我无法为每个 div col 添加自定义类和样式，因为只有 1 个 div 在 foreach 中循环，即数据来自数据库。

我已将 style="max-height:242px; width: auto;" 应用于图像，因此它们包含相似的尺寸。但问题是当文本更多时。

请告诉我如何获得相同大小的框，这样即使有更多文本，框也保持相同大小。

谢谢!

Answer 1

.fx-container,
.fx-container > div {
  display: flex;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row  fx-container">    
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=407%C3%97832&w=407&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>Apple iPhone 6 (Space Grey, 16 GB)</h4>
          <p>500</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97562&w=832&h=562" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>HP Core i3 5th Gen - (4 GB/1 TB HDD/DOS) X5Q17PA 15-be005TU Notebook  (15.6 inch, Turbo SIlver, 2.19 kg)</h4>
          <p>350</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=40&txt=424%C3%97832&w=424&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>Redmi Note 3 (Dark Grey, 16 GB)</h4>
          <p>50</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3" >        
      <div class="thumbnail">            
        <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97539&w=832&h=539" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;">
        <div class="caption">
          <h4>HP Pavilion Celeron Dual Core - (2 GB/500 GB HDD/DOS) W0H99PA 11-S003TU Notebook  (11.6 inch, Black, 1.23 kg)</h4>
          <p>350</p>
          <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
        </div>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

您可以为此使用 Flexbox。这是可以使用的最小样式，您可以根据需要添加更多样式。

引用:https://css-tricks.com/snippets/css/a-guide-to-flexbox/