Question

我正在使用引导程序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>

Answer 1

解决了它，似乎引导程序通过在类实用程序中不包含断点值来处理xs断点

<div class="d-flex flex-column flex-lg-row justify-content-around">

这有效

Answer 2

您应该使用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;
   }
}

引导程序在某些断点处更改弹性方向？

2 个答案: