Question

我是一个制作网站的新手。该网站在大屏幕上显示完美，但其布局在较小的屏幕上混乱。有人可以帮助我解决我做错的事吗？我该如何解决？非常感谢你。

这是我的代码和链接到我的网站。

链接： https://luckdrum.herokuapp.com/index.html

代码

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->


    <title>LuckDrum</title>
<link rel="shortcut icon" href="img/fav.ico" />
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css"href="css/bootstrap.css" >

    <!-- Custom styles for this template -->
    <link rel="stylesheet"type="text/css" href="jumbotron.css">


  </head>

  <body>

    <!--Heading Formation-->
 <div class="jumbotron">
      <div class="container-fluid">
      <div class="row">

<h5 align="left"><a href="#">PEOPE SEARCH</a></h5>
<!---->
<h6 class="text-center"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6>

<h6 id="h12"><a href="#"></a>Actors/movies</h6>
<h6 id="h13" class="text-center"><a href="#"></a>Authors</h6>
<h6 id="h14"class="text-center"><a href="#"></a>Chefs</h6>
<h6 id="h15"class="text-right"><a href="#"></a>Designers</h6>
<h6 id="h16"class="text-center"><a href="#"></a>Handcrafters</h6>
<h6 id="h17"><a href="#"></a>Jewelers</h6>
<h6 id="h18"><a href="#"></a>Musicans</h6>
<h6 id="h19"><a href="#"></a>Painters</h6>
<h6 id="h20"><a href="#"></a>Singers</h6>
<h6 id="h21"><a href="#"></a>Winemaker</h6>
<h6 id="h22"><a href="#"></a>Architect</h6>
<h6 id="h23"><a href="#"></a>bloggers</h6>
<h6 id="h24"><a href="#"></a>Hosts</h6>
<h6 id="h25"><a href="#"></a>Infographers</h6> 
    </div>
</div>
    </div></body>

Answer 1

Bootstrap在col-*网格系统上工作，指定的断点取决于视口大小。 col-*尺寸设置为在该视口的特定宽度处断开。

以下是标准的Bootstrap v3.3.5媒体查询，它与概述可用响应类的文档相对应。

/* Extra Small Devices, .visible-xs-* */
    @media (max-width: 767px) {}

    /* Small Devices, .visible-sm-* */
    @media (min-width: 768px) and (max-width: 991px) {}

    /* Medium Devices, .visible-md-* */
    @media (min-width: 992px) and (max-width: 1199px) {}

    /* Large Devices, .visible-lg-* */
    @media (min-width: 1200px) {}

http://getbootstrap.com/css/#responsive-utilities

以下是可接受的引导程序布局的示例，请注意它看起来与您当前没有任何关系，

<div class="container">
   <div class="row">
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
     <div class="col-md-1">.col-md-1</div>
   </div>
   <div class="row">
     <div class="col-md-8">.col-md-8</div>
     <div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
     <div class="col-md-6">.col-md-6</div>
     <div class="col-md-6">.col-md-6</div>
   </div>
</div>

CODEPEN DEMO

如何使用Bootstrap使我的网站响应？

1 个答案: