在 Safari 中使用 flexbox 制作相同高度的引导列答案

【问题标题】：Make Bootstrap Columns of the Same Height using flexbox in Safari在 Safari 中使用 flexbox 制作相同高度的引导列
【发布时间】：2017-08-04 19:44:14
【问题描述】：

我正在尝试使用 bootstrap 3 制作相同高度的列。我正在使用 flex box 来执行此操作，它在 chrome 和 firefox 上运行良好，但我无法在 safari 上实现。

.flex-it {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card{
  background: #f1f1f1;
  border-radius: 2px;
  height: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

<body>
	<div class="container">
		<div class="row flex-it">
		<div class="col-xs-3" style="-webkit-flex-basis:auto; flex-basis: auto;">
				<div class="card">
					<img src='http://worldversus.com/img/zara.jpg' style="width:100%;">
					<div style="font-size: 14px; font-weight: 600;">
						<span>Lorem</span>
					</div>
					<div style="font-size: 12px;">
						<span>Lorem Ipsum</span>
					</div>
				</div>
			</div>
			<div class="col-xs-3" style="-webkit-flex-basis:auto; flex-basis: auto;">
				<div class="card">
					<img src='http://worldversus.com/img/zara.jpg' style="width:100%;">
					<div style="font-size: 14px; font-weight: 600;">
						<span>Lorem Ipsum is simply dummy text</span>
					</div>
					<div style="font-size: 12px;">
						<span>Lorem Ipsum is simply dummy text</span>
					</div>
				</div>
			</div>	
		</div>
	</div>
</body>

谁能帮我解决这个问题。

【问题讨论】：

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

尝试明确声明flex-direction 属性：

.row > [class*='col-'] {
display: flex;
flex-direction: column;
}

但是，这可能会导致响应能力出现问题。如果是这样，请尝试从 .flex-it 中删除 flex-wrap 属性并添加以下代码：

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
flex-wrap: wrap;
}

【讨论】：

【解决方案2】：

<div class="container">
  <div class="row row-flex row-flex-wrap">
    <div class="col-md-3">
      <div class="panel panel-default flex-col">
       <div class="panel-heading">Test </div>
       <div class="panel-body flex-grow">Test Test Test </div>
       <div class="panel-footer">Test Test </div>
       </div>
    </div>
    <div class="col-md-3">
      <div class="well"> 
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
      </div>
    </div>
    <div class="col-md-3">
      <div class="well"> 
       Test Test Test Test 
      </div>
    </div>
    <div class="col-md-3">
      <div class="well"> 
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
        Test Test Test Test Test Test Test Test Test Test Test Test 
     Test Test Test Test Test Test Test Test Test Test Test Test Test  
      </div>
    </div>

  </div><!--/row-->
</div><!--/container-->

CSS：

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

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}
.card{
  background: #f1f1f1;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}
.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

请检查 Safari 浏览器是否正常引导程序 v3.1.1

我已经更新了，所以更新html代码和css代码

<div class="container">
  <div class="row row-flex row-flex-wrap">

    <div class="col-md-3">
      <div class="card">
                    <img src='http://worldversus.com/img/zara.jpg' style="width:100%;">
                    <div style="font-size: 14px; font-weight: 600;">
                        <span>Lorem</span>
                    </div>
                    <div style="font-size: 12px;">
                        <span>Lorem Ipsum</span>
                    </div>
                </div>
    </div>
    <div class="col-md-3">
      <div class="card">
                    <img src='http://worldversus.com/img/zara.jpg' style="width:100%;">
                    <div style="font-size: 14px; font-weight: 600;">
                        <span>Lorem Ipsum is simply dummy text</span>
                    </div>
                    <div style="font-size: 12px;">
                        <span>Lorem Ipsum is simply dummy text</span>
                    </div>
                </div>
    </div>

  </div><!--/row-->
</div><!--/container-->

【讨论】：

【解决方案3】：

这是浏览器的默认行为，无法更改。所以你必须做一些这样的技巧：

$(document).ready(function(){

    /* Get browser */
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

    /* Detect Chrome */
    if($.browser.chrome){

        /* Finally, if it is Chrome then jQuery thinks it's 
           Safari so we have to tell it isn't */
        $.browser.safari = false;
    }

    /* Detect Safari */
    if($.browser.safari){
        /* Do something for Safari */
        $('.container').addClass("Safari");//Adding class in parent div safari if browser is safari
    }

});

现在你可以像这样自定义你的风格

.Safari .card{
//do your custom style here
}

【讨论】：

如果你觉得很难，我可以为你做