2017-04-12 15 views
-3

這是我的問題:我正在做一個網站,當我嘗試調整它的div我添加(這是空的)停止擴展我的整個網站後某一點。這是非常基本的,但我不確定發生了什麼問題。使用HTML和CSS - 將不會調整後某個點

HTML的

<body> 
    <!-- navbar 01 starts here --> 
    <nav class = "navbar navbar-inverse col-lg-12"> 
     <div class = "container"> 
      <nav class = "navbar navbar-default"> 
       <div class = "container-fluid"> 
        <!-- Brand and toggle get grouped for better mobile display --> 
        <div class = "navbar-header"> 
         <button class  = "navbar-toggle collapsed" 
           data-target = "#defaultNavbar1" 
           data-toggle = "collapse" 
           type  = "button"> 
          <span class = "sr-only"> 
           Toggle navigation 
          </span> 

          <span class = "icon-bar"> 
          </span> 

          <span class = "icon-bar"> 
          </span> 

          <span class = "icon-bar"> 
          </span> 
         </button> 

         <a class = "navbar-brand" href = "#"> 
         </a> 
        </div> 

        <!-- Collect the nav links, forms, and other content for toggling --> 
        <div id = "defaultNavbar1" 
         class = "collapse navbar-collapse"> 
         <ul class = "nav navbar-nav"> 
          <li> 
           <a href = "#"> 
            Home 
           </a> 
          </li> 

          <li> 
           <a href = "#"> 
            Contact Us 
           </a> 
          </li> 
         </ul> 

         <form class = "navbar-form navbar-left" 
           role = "search"> 
          <div class = "form-group"> 
          </div> 
         </form> 

         <ul class = "nav navbar-nav navbar-right"> 
          <li> 
           <a href = "#"> 
            Support 
           </a> 
          </li> 

          <li> 
           <a href = "#"> 
            Get Started 
           </a> 
          </li> 
         </ul> 
        </div> 

        <!-- /.navbar-collapse --> 
       </div> 
      <!-- /.container-fluid --> 
      </nav> 
     </div> 
    </nav> 

    <!-- empty div 1 --> 
    <div class = "index-section01"> 
    </div> 

    <!--empty div 2--> 
    <div class = "index-section02"> 
    </div> 

    <!--image-half-way-logo to home--> 
    <div class = "index-logo01"> 
     <a href = "index.html"> 
      <img class = "img-responsive" 
       alt = "" 
       src = "images/3logo_home.png" 
       width = "1360" 
       height = "138"/> 
     </a> 
    </div> 

    <!--empty div 3--> 
    <div class = "index-section03"> 
    </div> 

    <script src = "js/jquery-1.11.2.min.js" 
      type = "text/javascript"> 
    </script> 

    <script src = "js/bootstrap.js" 
      type = "text/javascript"> 
    </script> 
</body> 

而且CSS代碼...

body 
{ 
    background-image : url(images/Final_Web_Home.jpg); 
    background-repeat : no-repeat; 
    background-size : cover; 
} 

.index-section01 
{ 
    min-width  : 100%; 
    padding-bottom : 500px; 
    padding-right : 127px; 
    padding-top : 500px; 
} 

.index-section02 
{ 
    min-width  : 100%; 
    padding-bottom : 770px; 
    padding-top : 600px; 
} 

.index-section03 
{ 
    min-width  : 100%; 
    min-width  : 0px; 
    padding-bottom : 578px; 
    padding-top : 833px; 
} 

.index-logo01 
{ 
    display  : block; 
    padding-bottom : 85px; 
    padding-left : 132px; 
    padding-right : 0px; 
    padding-top : 224px; 
} 

.navbar-default 
{ 
    background-color : #FFE016; 
    padding-top  : 17px; 
} 

.navbar-inverse 
{ 
    background-color : #FFE016; 
} 

這是Dreamweaver的平臺上完成。

+0

請更具體地說明您的意思是「不會調整大小」。 – Difster

+0

有很多divs ...我們沒有時間去嘗試和複製你的錯誤,你必須告訴我們。 – JustCarty

回答

0

您正在使用引導程序。

你把裏面的<div class="container">

所有內容從the documentation

引導需要包含的元素來包裝網站內容和容納我們的電網系統。您可以選擇兩個容器中的一個用於您的項目。請注意,由於填充等原因,兩個容器都不能嵌套。

使用.container作爲響應的固定寬度容器。

所以,是的,當你點擊容器的最大寬度時,它會停止變寬。這是這個班的重點。

將.container-fluid用於全寬度容器,跨越視口的整個寬度。