文章/答案/技术大牛

发布

社区首页 >问答首页 >引导容器故障

问引导容器故障
EN

Stack Overflow用户

提问于 2015-10-14 20:51:08

回答 3查看 62关注 0票数 2

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

索引

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

以下是我的网站使用的所有主要文件。我希望有人能帮我解决这个问题，因为这个问题目前阻碍了我的发展。

非常感谢你的帮助，谢谢汤姆

twitter-bootstrap

css

html

回答 3

Stack Overflow用户

发布于 2015-10-14 21:04:48

您没有正确地嵌套容器。如果我看一下“关于我们”部分的代码，并将其去掉一点，那么剩下的就是：

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

票数 0

Stack Overflow用户

发布于 2015-10-14 21:22:17

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

       <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

Stack Overflow用户

发布于 2015-10-14 21:26:42

您可以简单地尝试此修改。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33125825

复制

相似问题

问引导容器故障
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导容器故障EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导容器故障
EN