Question

我正在设计一个网站，但我的引导栏网格对于笔记本电脑和平板电脑屏幕正常运行。但不适用于移动设备

class Solution {
public:
    int numIslands(vector<vector<char>>& grid) {
        int count=0;
        int n=grid.size();
        int m=grid[0].size();
        if(grid.size()==0 || grid[0].size()==0)
            return 0;
        bool left,right,top,bottum;
        for(int i=0;i<n;i++)
            for(int j=0;j<m;j++)
            {
                   if(grid[i][j]=='1')
                   {
                       count++;
                       BFS(grid,i,j);
                   }
            }
        return count;
}
   void BFS(vector< vector <char> >& grids,int i,int j)
   {
       if(i<0 || j<0 || i>=grids.size() || j>=grids[0].size() || grids[i][j]=='0')
           return ;
       grids[i][j]='0';
       BFS(grids,i+1,j);
       BFS(grids,i,j+1);
       BFS(grids,i-1,j);
       BFS(grids,i,j-1);
   }
};

基本上基于此内容，有一列具有空的颜色边框，其行为类似于左侧的项目符号/编号，其余各列的项目符号右侧具有文本（h2，hr，p）。在移动屏幕上，项目符号排在我其他其余列的顶部。我无法解决的问题是什么？

Answer 1

我已经完成了你想要的：

codepen：https://codepen.io/Rishab2019/pen/JjYrLEB

.col-md-11, .col-sm-11, .col-xs-11{
  position:fixed!important;
  margin-left:80px;
  
}

.new1{
  margin-left:-30px;
  margin-top:-9px;
}


.row1{
  
 
   
  position:fixed; 
  display:inline;
  margin-left:500px;
  width:700px;
  
  
  
  
  
}

.row{
  
 
  
  position:fixed; 
  display:inline;
  
  width:800px;
  
  
  
}

.para{
  float:left;
  position:fixed;
  margin-top:40px;

}
.para1{
  float:left;
  position:fixed;
  margin-top:40px;
}


hr{
  width:700px;
  float:left;
 }

.border1{
  position:absolute;
  margin-left:-100px;

}

@media all and (max-width:768px){

.row{
position:fixed;

}
  
  .row1{
position:fixed;
width:100%;
margin-left:450px;
}
  .head{
  font-size:25px;
  
}
  hr{
  width:250px;
  margin-left:0px;
  
  
}

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                  <div class="row">
      <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
       <span class="border border-primary rounded" style="background-color:#0275d8;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="new col-md-11 col-sm-11 col-xs-11">
                                                <h2 class="head">Who we are</h2>
                                                <hr>
                                              <p class="para">Scaoasijdaosijdoaisdjh.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="row1">
                                            <div class="col-md-1 col-sm-1 col-xs-1 mt-2">
                                                <span class="border1 border-success rounded" style="background-color:#5cb85c;display:inline-block;padding:10px;"> </span>
                                            </div>
                                            <div class="new1 col-md-11 col-sm-11 col-xs-11">
                                                <h2 class="head">What we do</h2>
                                                <hr>
                                                <p class="para1">textxtxttx</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

类似地，您可以使用媒体查询进行更多修改。

Bootstrap嵌套列无法在设备上移动

1 个答案: