切换到响应式移动设备时如何并排对齐四个div

Posted 2023-03-06

【中文标题】切换到响应式移动设备时如何并排对齐四个div

【英文标题】：How align four div side by side when switch to mobile device with responsive

【发布时间】：2021-09-08 04:37:37

【问题描述】：

我有 4 个大小相同的 div，当我的网站在桌面视图中并排显示时，但当我切换到移动视图时，它显示一个在另一个之下。 我使用 display: flex;还使用了 col-3 col-sm-3 col-md-3 col-lg-3 的引导类。但它仍然没有响应。

.container-fluid
    min-width: 290px;
    max-width: 1500px;
    margin: 15px 10px;
    text-align: center;
    /* border: 0px solid #777; */
    /* border-radius: 5px; */

.content
    font-family: 'Hammersmith One', sans-serif;
    margin: 10px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    cursor: pointer;
    position: relative;
    


.content .box
    min-width: 200px;
    margin: 8px;
    /* border: 0.5px solid #ccc; */
    padding: 1px;
    border-radius: 10px;
    letter-spacing: 1px;

<div class="container-fluid mt-5">
            <div class="row">
            <div class="col-md-10 col-12 mx-auto">
                
                

                        
                <div class="content col-12 col-sm-12 col-md-12 col-lg-12">
                    <a class="page" id="confirmed" tabindex="0">
                        
                        <div class="box confirmeds nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                            <p>Confirmed</p>
                            <i class='bx bx-plus'>550</i>
                            <h3>//data came from API</h3>
                            
                        </div>
                    </a>
                    <a class="page" id="active" tabindex="0">
                        
                        <div class="box actived nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                            <p>Active</p>
                            <h6></h6>
                            <h3>//data came from API</h3>
                            
                        </div>
                    </a>
                    

                    <a class="page" id="recover" tabindex="0">
                        
                        <div class="box recovereds nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                            <p>Recovered</p>
                            <i class='bx bx-plus'> 1500</i>
                            <h3>//data came from API</h3>
                            

                        </div>
                    </a>
                    

                    <a class="page" id="dieds" tabindex="0">
                       
                        <div class="box deathss nav-item col-                           3 col-sm-3 col-md-3 col-lg-3">
                            <p>Deaths</p>
                            <i class='bx bx-plus' >502</i>
                            <h3>//data came from API</h3>
                            
                        </div>
                    </a>

如何将它们并排对齐？我确实尝试过使用@media 查询，但没有奏效。请向我建议一些媒体查询，例如在达到特定宽度（移动视图）时更改字体大小。我正在插入一些截图：-

【问题讨论】：

***.com/questions/2997767/… 这有帮助吗？

【参考方案1】：

像这样使用它-

<div class="col-xs-12">
  <div class="col-xs-3">Column 1 </div>
  <div class="col-xs-3">Column 2 </div>
  <div class="col-xs-3">Column 3 </div>
  <div class="col-xs-3">Column 4 </div>
</div>