2015-10-14 63 views
2

我有一個網站正在開發中,我有一個關於部分和一些產品盒,產品盒在關於我們信息的分隔容器中。同類產品容器ID爲與第一容器級別...這裏是我的代碼 圖片:Bootstrap容器問題

enter image description here 指數

<!DOCTYPE html> 
    <html lang="en"> 

    <head> 

    <!-- Meta charset 
    ===================================================================================--> 
      <meta charset="utf-8"> 

    <!-- Title 
    ===================================================================================--> 
      <title>Cold Cure Windows</title> 

    <!-- Meta Tags 
    ===================================================================================--> 
      <meta name="author" content="Thomas Withers @ Ice7Media"> 
      <meta name="description" content="Social Media Wizzards that handle all of your social media markerting."> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

      <!-- CSS Stylesheets 
    ===================================================================================--> 
      <link href = "css/bootstrap-styles/bootstrap.min.css" rel = "stylesheet"> 
      <link href = "css/animate.css" rel= "stylesheet"> 
      <link href = "css/global-styles.css" rel = "stylesheet"> 
      <link href = "css/page-styles/home.css" rel= "stylesheet"> 
      <link rel = "shortcut icon" href = "img/bocFav.png"> 

    <!-- Custom Fonts 
    ===================================================================================--> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
      <link href='https://fonts.googleapis.com/css?family=Fjalla+One|Vollkorn:400,400italic,700,700italic|Quicksand:400,300,700' rel='stylesheet' type='text/css'> 
     </head> 

    <body> 

==================================================================================--> 
     <section id="about-us" class="about-us"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-6 vline"> 
         <h3>About Us</h3> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-6"> 
         <div class="action-button callback"> 
          request a <span>Brochure</span> 
         </div> 
         <div class="action-button callback"> 
          <br><span>Contact Us</span> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="menu col-lg-6 col-lg-offset-6"> 
        <a href="#" class="menu-link" style="background: url('/img/Image1.jpg');"> 
         <span>Windows</span> 
        </a> 
       </div> 
      </div> 
     </section> 

     <!-- Scripts 
     ===================================================================================--> 
      <!-- jQuery --> 
      <script src="js/jquery.js"></script> 
      <script src="js/bootstrap.min.js"></script> 
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ">    </script> 
      <script src="js/wow.min.js"></script> 
      <script src="js/jquery.easing.min.js"></script> 
      <script src="js/fix-nav.js"></script> 
      <script src="js/map.js"></script> 
      <script> 
      $('.carousel').carousel({ 
       interval: 5000 //changes the speed 
      }) 
      </script> 
     </body> 

     </html> 

/*=========================================================================================== B9B9B9 */ 
.about-us { 
    padding-top: 100px; 
    padding-bottom: 100px; 
    background-color: #D0D0D0; 
    color: #1F1F1F; 
} 

.row-2 { 
    padding-top: 350px; 
    padding-left: 11px; 
} 

.menu-product { 
    height: 160px; 
    text-align: center; 
} 

.menu-link { 
    display: block; 
    position: absolute; 
    height: 240px; 
    width: 240px; 
    border: 1px solid #0095D5; 
    margin-bottom: 15px; 
    background-size: cover !important; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

.menu-link:hover { 
    transform: scale(1.045); 
} 

.menu-link > span { 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    background: #0095D5; 
    color: white; 
    bottom: 0px; 
    left: 0px; 
    height: 30px; 
    line-height: 30px; 
} 
.set-2{ 
    padding-top: 100px; 
    padding-right: -100px; 
} 

.set-3{ 
    padding-top: 450px; 
    padding-right: -100px; 
} 

這裏是所有主要文件我的網站使用...我希望有人可以幫我解決這個問題,因爲它現在正在停止我的發展

非常感謝任何幫助 謝謝 Tom

+1

該死的代碼是一個最有可能真正的小問題...很多閱讀材料的;),可以最大限度地減少HTML和CSS和提供商[最低可驗證的示例](http://stackoverflow.com /幫助/ MCVE)? – giorgio

+0

@giorgio爲你編輯! –

+0

看起來你只需要嘗試瞭解Bootstrap網格系統是如何工作的。 – DavidG

回答

0

您沒有正確嵌套您的容器。如果我看關於我們部分的代碼,並剝奪了一點,然後你留下了:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-6 vline"> 
      <h3>About Us</h3> 
      <p>...</p> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-6"> 
      CTA's 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="menu col-lg-6 col-lg-offset-6"> 
     image button 
    </div> 
</div> 

正如你可以看到您放置三個容器,海誓山盟下每一個行。它正是顯示。你需要的是一個容器一個排,拿着欄旁邊的海誓山盟,和第一列保存行。你可以關注嗎?看看這個代碼:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-6 vline"> 
      <h3>About Us</h3> 
      <p>...</p> 

      <!-- Move the CTA's to here --> 
      CTA's 
     </div> 

     <!-- And place this column in the same row --> 
     <!-- Be sure to get rid of the col-lg-offset-x class --> 
     <div class="menu col-lg-6"> 
      image button 
     </div> 
    </div> 
</div> 
1

如果你需要所有人都在同一個級別,我們不需要三個容器。 當你使用第二個容器時,它會停止。 您可以使用如下代碼:

 <section id="about-us" class="about-us"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-6 vline"> 
         <h3>About Us</h3> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p> 
        </div> 
        <div class="col-lg-6"> 
         <div class="row"> 
          <div class="action-button callback"> 
          request a <span>Brochure</span> 
          </div> 
          <div class="action-button callback"> 
           <br><span>Contact Us</span> 
          </div> 
          <a href="#" class="menu-link" style="background: url('/img/Image1.jpg');"> 
          <span>Windows</span> 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 

這是怎麼獲得,如果你需要在右半側的第二和第三容器上的東西的完成。

關係
Nabeel

0

您可以簡單地嘗試此修改。

 <div class="container"> 
     <div class="row"> 

      <div class="col-lg-6 vline"> 
      <h3>About Us</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p> 
      </div> 

      <div class="col-lg-6"> 

      <div class="action-button callback"> 
       request a <span>Brochure</span> 
      </div> 

      <div class="action-button callback"> 
       <br><span>Contact Us</span> 
      </div> 

      </div> 

     </div> 
     </div>