2015-10-14 60 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>