bootstrap 4 alpha 6 flexbox 响应问题答案

【问题标题】：bootstrap 4 alpha 6 flexbox responsive troublebootstrap 4 alpha 6 flexbox 响应问题
【发布时间】：2017-02-03 06:05:42
【问题描述】：

...我正在检查新的 bootstrap 4 flexbox 网格

https://v4-alpha.getbootstrap.com/utilities/flexbox/

我对此有一些疑问...我试图了解如何使用由引导程序创建的响应式 flexbox 类...我有这样的事情：

<div id="start" class="d-flex flex-row justify-content-center">
              <img src="img/logocolor.gif" class="img-fluid" alt="Responsive image">

              <div class="card border-0">
                    <div class="card-block">
                          <h4 class="card-title text-center">DERMATOCOSMATR&Iacute;A PROFESIONAL</h4>
                          <p class="card-text">Somos un equipo multidiciplinario que se encarga de atender y solucionar las inquietudes<br> y necesidades del paciente desde un punto de vista integral; cl&iacutenico y cosm&eacutetico.</p>
                          <a href="#" class="card-link">Another link</a>
                    </div>
              </div>
        </div>

它可以在桌面设备上运行......但是当我尝试在手机等较小的设备上查看我的页面时，我尝试使用......例如......小尺寸“flex-sm-wrap”的响应类但是小视图没有任何反应......但桌面尺寸发生了变化！我不明白为什么它采用应该在小型设备上工作的类，并且在桌面尺寸上使用它们......这非常令人困惑......我应该如何为每个设备尺寸指定类？ Mi objetive 正在使用这个 bootstrap 4 flexbox 网格构建一个响应式网络。感谢您的帮助！

【问题讨论】：

你能为此创建一个小提琴吗？或者只是截取确切目标的屏幕截图？
ok @claudios 在这里....jsfiddle.net/f5kx4bhe ...这个小提琴的结果是应该如何在单元设备上使用“flex-sm-wrap”...但这是发生在桌面设备上
@Ragner 你找到解决方案了吗？

标签： html class responsive-design flexbox twitter-bootstrap-4

【解决方案1】：

小提琴坏了，因为它没有正确包含 Bootstrap。与使用 flexbox 实用程序不同，使用 flexbox 网格（行和列）可能更容易获得所需的布局。

<div id="start" class="row">
        <div class="col-md-6 text-center"><img src="http://lorempixel.com/output/animals-q-c-640-480-5.jpg" class="img-fluid" height="100" alt="Responsive image"></div>
        <div class="col-md-6">
            <div class="card border-0">
                <div class="card-block">
                    <h4 class="card-title text-center">DERMATOCOSMATRÍA PROFESIONAL</h4>
                    <p class="card-text">Somos un equipo multidiciplinario que se encarga de atender y solucionar las inquietudes
                        <br> y necesidades del paciente desde un punto de vista integral;</p>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>

这是一个 Codeply 演示（已选择 Bootstrap 4 alpha 6）..

http://www.codeply.com/go/IKFZH4ccIW

【讨论】：