我是一个做网站的新手。该网站在大屏幕上显示完美，但其布局在小屏幕上变得困惑。有人可以帮我解决我做错的事吗？我该如何解决？ 非常感谢。
这是我的代码和我网站的链接。
链接: 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>
最佳答案
Bootstrap 在 col-* 网格系统上工作，该系统具有取决于视口(viewport)大小的指定断点。 col-* 大小设置为在该视口(viewport)的特定宽度处断开。
这里是标准的 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
下面是一个可接受的 bootstrap 布局示例，请注意它目前看起来与您的完全不同，
<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>
关于javascript - 如何使用 Bootstrap 使我的网站具有响应性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33507737/