如何解决引导程序在某些断点处更改弹性方向?
我正在使用引导程序4,我有一个div具有d-flex的功能,并且应该在“ lg”(屏幕1200px及更高)断点处显示方向行,以及在手机“ sm”上使用它时还是将使用“ xs”断点,它将显示方向列并表现得像列一样,但是无论我如何尝试,它始终一直保持行状态
我尝试过
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
和
<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">
但是它不起作用..我误解了断点系统或其他东西?我的意思是,我将使用CSS媒体查询执行相同的操作。
这是完整的代码
<div class="w-75 my-5 mx-auto">
<h1 class=" text-center my-3">Awards won</h1>
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award1.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Best cake made in 2019</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award2.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award3.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Most satisfied customers award</span>
</div>
</div>
</div>
解决方法
解决了它,似乎引导程序通过在类实用程序中不包含断点值来处理xs断点
<div class="d-flex flex-column flex-lg-row justify-content-around">
这有效
,您应该使用CSS来完成此任务。 Bootstrap应该用于网格。 CSS样式元素。这将使您的标记更加清晰,并避免使用不必要的内联类。这是一个例子
html
<div class="col-sm-4">
<div class="item">
<div class="item__title">Heres a title</div>
<div class="item__content">
some content
</div>
</div>
</div>
css
.item{
display: flex;
flex-direction: column;
@media (min-width: 1200px){
flex-direction: row;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。