html – Flexbox打破了引导响应

2023年1月25日 251次阅读

我有一行,其中一列的高度可能会有所不同,所以我不知道它会有多高.为了适当地隔开相邻列,我使用了嵌套的弹性框.

这在主要断点上工作正常,但是一旦我添加了弹性框,这就会打破响应性,因为列不再在移动设备上堆叠.

我该怎么办？我应该放弃flexbox吗？我怎么能达到这个间距？

.container{
  margin-top: 60px;
}
 .container{
  border: 1px solid #000;  
}
.row{
  display: flex;
}
.row-center{
  display: flex;
  flex: 1;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #000;
  width: 100%;
}

.one, .two, .three{
  flex: 0 0 40px;
  border: 1px solid #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div>
    <div class="col-xs-12 col-sm-6 row-center">
      <div class="outer">
        <div class="one">some text</div>
        <div class="two">some text</div>
        <div class="three">some text</div>
      </div>
    </div>
  </div>
</div>

jsfiddle mirror：https://jsfiddle.net/y68dnzwy/

最佳答案 可能对此有所帮助：

.container{
  margin-top: 60px;
}
 .container{
  border: 1px solid #000;  
}
.row{
  display: flex;
}
.row-center{
  display: flex;
  flex: 1;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #000;
  width: 100%;
}

.one, .two, .three{
  flex: 0 0 40px;
  border: 1px solid #000;
}
/* Added: */
@media screen and (min-width:100px) and (max-width: 980px) {
  .row-center {
    flex: auto;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div>
    <div class="col-xs-12 col-sm-6 row-center">
      <div class="outer">
        <div class="one">some text</div>
        <div class="two">some text</div>
        <div class="three">some text</div>
      </div>
    </div>
  </div>
</div>

Demo

点赞