Question

我有一个正在开发的网站，我有一个关于部分和一些产品盒，产品盒在一个隔间容器中，关于我们的信息。我希望产品容器与第一个容器齐平......这是我的代码图像：

索引

    <!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;
}

以下是我网站使用的所有主要文件...我希望有人可以帮我解决这个问题，因为它正在阻止我的开发

非常感谢任何帮助谢谢汤姆

Answer 1

您没有正确嵌套容器。如果我查看“关于我们”部分的代码并将其删除一点，那么您将离开：

<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>

Answer 2

如果你需要所有人都在同一级别，我们不需要三个容器。当你使用第二个容器时它会下降。您可以使用以下代码：

       <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

Answer 3

您可以尝试这种修改。

      <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>

引导容器故障

3 个答案: