18910140161

Html

首页 >> 前端开发 >> Html

html-无法使用bootstrap获得响应的网页。无法使用容器和列获得响应的布局-堆栈溢出

顺晟科技

2022-10-19 12:33:26

223

我对此相当陌生，我已经尝试过容器和行，并根据需要相应地划分列。目前的大纲让我在我的电脑上有一个很好的网页，但我仍然没有得到一个响应页面。我知道提供媒体标记可以解决这个问题，但我正在尝试引导V4.6。

<!DOCTYPE html>


<!--Building a github page-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <STYLE>
     body{
       background-color:#a9ba9d;
     }
        .box{
       background-color: #36454f;
       margin-bottom: 90px;
      
     }
     
     .fa{
       color:white;
       padding:15px;
       
     }
     .text-center{
       padding-left:650px;
       color:white;
       
     }

     .box2{
         background-color:#343434;
         margin-top:50px;
         margin-left:200px;
         padding: 100px 400px 10px 200px;
         border-radius:25px;
         height: 190px;
         
     }
     .boxpart{
         background-color:#343434;
         padding-bottom:500px;
         border-radius:25px;
         margin-right: 50px;
         width:300px
     }
    .small-box{
         background-color:#343434;
        margin:20px;
        margin-top: 80px;
        padding:70px 0px 50px 0px;
        border-radius:25px;
    }
     .small-box1{
         background-color:#343434;
        margin:20px;
        margin-left:125px;
        margin-top:80px;
        padding:40px 0px 50px 0px;
        border-radius:25px;
     }
    input{
       background-color:#343434;
       margin-left:250px;
       padding: 2px 2px 2px 5px;
       border-radius:10px;
       width: 500px;
    }
    input::placeholder{
        color:grey
    }
    .row{
        width:900px;
    }   
   </STYLE>
</head>

    <body>
    <div class="box">
            <span class="fa fa-github fa-2x" ></span>
             <span class="text-center">GITHUB</span>     
    </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="text-centre boxpart">
                     </div> 
                </div>
                    <div class="col-sm-9 col-md-9 col-lg-9">
                            <input type="text" placeholder="Search">
                                    <div class="row">
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box1"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-6 col-md-6 col-lg-6 box2"></div>
                                    </div>
                               </div>
                            </div>
                         </div>
            </div>
        </div>
    </body>
    </html>

顺晟科技：

您已经为几个元素指定了宽度。当你在东西上设置固定的宽度时，它们就不能有反应。BoxPart div的宽度将始终为500px，因此它将在小于500px的设备上溢出。您还重写了来自Bootstrap的.Row类的宽度，并将其设置为固定宽度。所以那也不能反应。在我看来，您在正确的部分中还有一些额外的s。

这里的底线是：不要与框架作斗争。使用它提供给您的东西。

这里有一个五分钟的清理你所拥有的。还有很多工作要做（比如把头放入a中），所以看看引导文档并深入研究。

<!DOCTYPE html>


<!--Building a github page-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <STYLE>
     body{
       background-color:#a9ba9d;
     }
        .box{
       background-color: #36454f;
       margin-bottom: 90px;
      
     }
     
     .fa{
       color:white;
       padding:15px;
       
     }
     .text-center{
       padding-left:650px;
       color:white;
       
     }

     .box2{
         background-color:#343434;
         margin-top:50px;
         margin-left:200px;
         padding: 100px 400px 10px 200px;
         border-radius:25px;
         height: 190px;
         
     }
     .boxpart{
         background-color:#343434;
         padding-bottom:500px;
         border-radius:25px;
         margin-right: 50px;
         width:300px
     }
    .small-box{
         background-color:#343434;
        margin:20px;
        margin-top: 80px;
        padding:70px 0px 50px 0px;
        border-radius:25px;
    }
     .small-box1{
         background-color:#343434;
        margin:20px;
        margin-left:125px;
        margin-top:80px;
        padding:40px 0px 50px 0px;
        border-radius:25px;
     }
    input{
       background-color:#343434;
       margin-left:250px;
       padding: 2px 2px 2px 5px;
       border-radius:10px;
       width: 500px;
    }
    input::placeholder{
        color:grey
    }
    .row{
        width:900px;
    }   
   </STYLE>
</head>

    <body>
    <div class="box">
            <span class="fa fa-github fa-2x" ></span>
             <span class="text-center">GITHUB</span>     
    </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="text-centre boxpart">
                     </div> 
                </div>
                    <div class="col-sm-9 col-md-9 col-lg-9">
                            <input type="text" placeholder="Search">
                                    <div class="row">
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box1"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-6 col-md-6 col-lg-6 box2"></div>
                                    </div>
                               </div>
                            </div>
                         </div>
            </div>
        </div>
    </body>
    </html>

首先，您有一些多余的div标记。

然后您必须在这里研究引导断点:[https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints][1]

如果要将内容放在mobile的列中，则需要在所有div中添加“Col-12”。

示例:

<!DOCTYPE html>


<!--Building a github page-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <STYLE>
     body{
       background-color:#a9ba9d;
     }
        .box{
       background-color: #36454f;
       margin-bottom: 90px;
      
     }
     
     .fa{
       color:white;
       padding:15px;
       
     }
     .text-center{
       padding-left:650px;
       color:white;
       
     }

     .box2{
         background-color:#343434;
         margin-top:50px;
         margin-left:200px;
         padding: 100px 400px 10px 200px;
         border-radius:25px;
         height: 190px;
         
     }
     .boxpart{
         background-color:#343434;
         padding-bottom:500px;
         border-radius:25px;
         margin-right: 50px;
         width:300px
     }
    .small-box{
         background-color:#343434;
        margin:20px;
        margin-top: 80px;
        padding:70px 0px 50px 0px;
        border-radius:25px;
    }
     .small-box1{
         background-color:#343434;
        margin:20px;
        margin-left:125px;
        margin-top:80px;
        padding:40px 0px 50px 0px;
        border-radius:25px;
     }
    input{
       background-color:#343434;
       margin-left:250px;
       padding: 2px 2px 2px 5px;
       border-radius:10px;
       width: 500px;
    }
    input::placeholder{
        color:grey
    }
    .row{
        width:900px;
    }   
   </STYLE>
</head>

    <body>
    <div class="box">
            <span class="fa fa-github fa-2x" ></span>
             <span class="text-center">GITHUB</span>     
    </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="text-centre boxpart">
                     </div> 
                </div>
                    <div class="col-sm-9 col-md-9 col-lg-9">
                            <input type="text" placeholder="Search">
                                    <div class="row">
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box1"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-6 col-md-6 col-lg-6 box2"></div>
                                    </div>
                               </div>
                            </div>
                         </div>
            </div>
        </div>
    </body>
    </html>

我希望对你有帮助

当在bootstrap中也使用内置的row时，尽量不要使用名为row的类以避免问题，而且bootstrap中的网格系统在12列中工作，例如，如果一个div是col-lg-8，而您有两个div，另一个应该是col-lg-4，这样它可以是12列。

我还建议您在那里的官方网站上阅读此文档

https://getbootstrap.com/docs/4.1/layout/grid/

  • TAG：
上一篇：jQuery html在拖放时复制- 下一篇：HTML-如何使每个callenda
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！