Question

我正在尝试使用bootstrap 3制作相同高度的列。我正在使用弹性框来执行此操作，它在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>

有人可以帮我解决这个问题。

Answer 1

<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浏览器工作正常 Bootstrap 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-->

Answer 2

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

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

然而，这可能会导致响应问题。如果是，请尝试从flex-wrap删除.flex-it属性，然后添加以下代码：

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

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

使用Safari中的flexbox制作相同高度的Bootstrap列

3 个答案: