响应式引导网格

问题描述 投票:0回答:1

我正在制作引导网格,我遇到了问题,我现在不知道如何解决。基本上在移动视图中,我需要第二个块位于第一个块旁边,但我真的不知道该怎么做。感谢优势

我尝试过谷歌网格,但找不到与我类似的东西。

<div class="container-fluid" id="MainText">
<div class="row">
  <div class="col-sm-12 col-md-3 ">
    <div class="row">
      <div class="col-sm-6 ">
        <div class= "1">
          <h4 id ="Galv_pakalp_Header">Mūsu galvenie pakalpojumi</h4>
                <p>some text</p>
        </div> 
      </div> 
    </div>
    <div class="row">
      <div class="col-sm-6 ">
        <div class= "2">
          <h4 id ="Popul_Griez_Header">Populārākie vīrešu griezumi</h4>
               <p>some text</p>
         </div> 
        </div>
    </div>
  </div>
  <div class="col-md-9 ">
    <h2 id ="Barb_cons">Barb_cons</h2>
    <img src="" class="rounded float-end" alt="" >
    <p>some text</p>
  </div>
</div>
</div>
responsive-design grid bootstrap-5
1个回答
0
投票

假设您的意思是

sm
作为移动断点,请删除嵌套行。

div class="container-fluid" id="MainText">
    <div class="row">
        <div class="col-sm-12 col-md-3">
            <div class="row">
                <div class="col-sm-6 ">
                    <div class="1">
                        <h4 id="Galv_pakalp_Header">Mūsu galvenie pakalpojumi</h4>
                        <p>some text</p>
                    </div>
                </div>
                <div class="col-sm-6 ">
                    <div class="2">
                        <h4 id="Popul_Griez_Header">Populārākie vīrešu griezumi</h4>
                        <p>some text</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 ">
            <h2 id="Barb_cons">Barb_cons</h2>
            <img src="" class="rounded float-end" alt="">
            <p>some text</p>
        </div>
    </div>
</div>

https://codeply.com/p/OZFCMQJvKg

© www.soinside.com 2019 - 2024. All rights reserved.