Question

我正在使用Bootstrap 3（遗憾的是无法将其更改为Bootstrap 4），我需要实现与图片中相同的高度列效果：我已经成功地通过使用位置绝对和@media屏幕来获得正确的图像大小和填充（黄色区域），但我相信有更好的方法来解决它。

我找到了很好的工作代码here，但是在顶部添加图片会破坏设计 - 图片会添加到其他列并展开所有内容（here）。添加显示：块让我回到原始问题 - 不同高度的列。

我确定有一些干净利落的方式让它发挥作用！

编辑：到目前为止，我有一个主行（下图中的绿框），其中有3列。如果我改为3行（红色框架）并仅对中间内容应用相同高度怎么办？它可以在大屏幕上很好地工作，但是在小屏幕上，当列占据整个屏幕宽度时，它最终会有3张图片一张在另一张下，三张描述部分在另一张下面，三个按钮在另一张下面 - 绝对不是我想要的！在这种情况下有没有办法重新排列列的显示，所以我会得到3x图片描述按钮？

edit2：已添加代码段

＆＃13;

html,body {
	height:100%;
}
      
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}


.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}

＆＃13;

<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</header>
<body>
<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
  <div class="row row-flex row-flex-wrap">
	<div class="col-xs-4">
      <div class="well"> 
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
      </div>
    </div>
    <div class="col-xs-4">
	<img class="img-responsive" src="http://placehold.it/200x100">
  	  <div class="well"> 
        Duis pharetra varius quam sit amet vulputate.  
      </div>
    </div>
    <div class="col-xs-4">
  	  <div class="well"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. 
      </div>
    </div>
  	
  </div><!--/row-->
</div><!--/container-->
<hr>



</body>

＆＃13;

Answer 1

我认为你只需要继续将flexbox的应用程序扩展到孩子们身上。

但请注意，图像可能会对本机灵活儿童造成严重影响。在div中包装图像可以解决问题。

＆＃13;

html,
body {
  height: 100%;
}
.row-flex {
  display: flex; /* columns are now equal height */
}
.col-md-3 {
  background: pink;
  display: flex;
  flex-direction: column;
}
.panel,
.well { /* make panels & wells expand to full height */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.panel-footer { /* push footer to bottom */
  margin-top: auto;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row row-flex">
    <div class="col-md-3">
      <div class="panel panel-default flex-col">
        <div class="panel-heading">Title flex-col</div>
        <div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
        <div class="panel-footer">Footer</div>
      </div>
    </div>

    <div class="col-md-3">
      <div>
        <img class="img-responsive" src="http://placehold.it/400x100">
      </div>
      <div class="well">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit.
      </div>
    </div>
    <div class="col-md-3">
      <div class="well">
        Duis pharetra varius quam sit amet vulputate.
      </div>
    </div>
    <div class="col-md-3">
      <div class="well">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
      </div>
    </div>

  </div>
  <!--/row-->
</div>
<!--/container-->

＆＃13;

Codepen Demo

Answer 2

没有其他方法可以在CSS中使其具有相同的高度。我的意思是动态（没有设置特定的高度）。

如果将显示器flex更改为显示块。它不起作用。

选项：Javascript。获得3个flex-children的高度，并使用Math.max（）进行比较;将返回编号设置为flex-children。

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex-children {
  width: 30%;
  background: red;
}

<div class="flex">
  <div class="flex-children">asd</div>
  <div class="flex-children">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora et nisi harum eaque quas similique esse voluptas? Expedita in vitae, vel unde deleniti hic dolores rerum. Aliquam quos quidem quae.</p>
  </div>
  <div class="flex-children">ddey</div>
</div>

只需覆盖特定内容的引导样式即可。

具有Bootstrap 3和flexbox

2 个答案: