Question

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

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

我对它有一些疑问......我试着理解如何使用bootstrap创建的响应式flexbox类......我有类似的东西：

git commit -m "Adding format to files"

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

Answer 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

bootstrap 4 alpha 6 flexbox响应式故障

1 个答案: