如何使用Bootstrap使我的網站響應？

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 個解決方案

解決方案1
3 2015-11-03 23:41:17

如何使用Bootstrap使我的網站響應？

問題描述

1 個解決方案

解決方案1 3 2015-11-03 23:41:17

解決方案1
3 2015-11-03 23:41:17