Question

我在bootstrap 3.3.7中的响应式设计有问题

这是我在第一列中有一些文本而第二列上有图像的行。

    .portfolio-text {
        display: flex;
        align-items: center;
        justify-content: center;
    }

 <div class="row portfolio-text">
        <div class="col-sm-7 col-sm-offset-1">
            <p>text</p>
        </div>
        <div class="col-sm-4 ">
            <img src="{{ url_for('static', filename="img/advice-public-post.png") }}" class="img-responsive"
                 alt="Advice on public posts">
        </div>
    </div>

它在桌面上看起来很不错，但在我的iPhone上我得到的图像非常小，文本旁边就是文字。我原本期望图像和文本分别位于一个单独的行上，彼此相对，以留出足够的空间。您可以在智能手机上试用我的网站，亲眼看看：http://moodimo.com

display: flex;是否阻止了响应式设计？我该怎么办？

Answer 1

您只需要从display: flex类中删除属性portfolio-text，bootstrap就会处理它。

Answer 2

只需添加flex-flow:row wrap

即可

＆＃13;

.portfolio-text {
  display: flex;
  align-items: center;
  justify-content: space-around;   /* instead of center */  
  flex-flow: row wrap;   /* Added */
}

＆＃13;

<div class="row portfolio-text">
  <div class="col-sm-8">
    <p>text</p>
  </div>
  <div class="col-sm-4 ">
    <img src="http://lorempixel.com/400/200" class="img-responsive" alt="Advice on public posts">
  </div>
</div>

＆＃13;

使用display时如何实现响应式设计：flex？

2 个答案: