bootstrap-4 - 为不同的断点调整内容 Bootstrap 4

标签 bootstrap-4

如何为不同断点证明列内容的合理性。例如,我希望以下电子邮件文本对于 > 中等列对齐到末尾,但对于较小的列则对齐到中心。寻找一个优雅的解决方案。

<div class="row">
            <div class="col-md-4">
              Email
            </div>
</div>

最佳答案

要定位列 div 的内容,您可以使用带有 d-flex 的 justify-content-* 类的响应式版本

<div class="row">
    <div class="col-md-4 d-flex justify-content-md-end justify-content-center">
      Email
    </div>
</div>

只需添加类 d-flex 来显示 Flex,并添加 justify-content-md-end 类以在列的末尾对齐以显示 md 并向上,并添加 justify-content-center 对齐显示 xs 和向上的中心。

Demo

关于bootstrap-4 - 为不同的断点调整内容 Bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49840369/

相关文章:

html - Bootstrap v4.0.3 Alpha Carousel 阴影

javascript - Bootstrap 模式不会在页面加载时打开

html - Bootstrap 4 模态中心内容

css - jQuery UI 可排序 : Prevent horizontal scrolling with connected lists between full height columns

html - 我该怎么做才能获得相同的列高?

css - 如何使滚动列表组列与相邻列的高度相同?

jquery - Bootstrap Collapse 复杂行为

html - 如何修复无法在移动设备上正确显示的 Bootstrap4 菜单

twitter-bootstrap - Bootstrap - 我不希望列具有相同的高度

css - 自举网格不均匀列