2017-04-12 3 views
-3

これは私の問題です:私はウェブサイトを作っていますが、私が追加したdiv(空である)をサイズ変更しようとすると、ある点。これは非常に基本的ですが、私は何がうまくいかないのか分かりません。 HTML-htmlとcssを使用すると特定のポイントの後にサイズが変更されません

<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

多くの部門があります...私たちはあなたのエラーを再現しようとする時間がありません。 – JustCarty

答えて

0

あなたはブートストラップを使用しています。

あなたはthe documentationから<div class="container">

内のすべてのコンテンツを置く:

ブートストラップは、サイトの内容をラップし、私たちのグリッドシステムを収容するために含む要素が必要です。プロジェクトで使用する2つのコンテナのいずれかを選択できます。パディングなどにより、どちらのコンテナもネスト可能ではないことに注意してください。

応答性固定幅コンテナの場合は.containerを使用します。

はい、コンテナの最大幅に達すると、幅が広がります。それがそのクラスのポイントです。

ビューポートの幅全体にまたがる幅の広いコンテナに.container-fluidを使用します。

関連する問題