Question

我从http://startbootstrap.com/templates/scrolling-nav/

下载了Bootstrap模板

<section id="intro" class="intro-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Scrolling Nav</h1>
                <div class="page-scroll">
                    <a class="btn btn-default" href="#about">Click me!</a>
                </div>
                <br>
                <p>This demo is the same sort of scrolling navigation menu we use in our <a href="http://startbootstrap.com/grayscale.php">Grayscale theme</a>. Whenever you want to use the page scrolling feature, make sure the link points to an ID (<code>#about</code> for example), and that the parent of the link has the class <code>.page-scroll</code>. See how the button above and the menu bar links are formatted for a working example.</p>
            </div>
        </div>
    </div>
</section>

<section id="about" class="about-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>About Section</h1>
            </div>
        </div>
    </div>
</section>

<section id="services" class="services-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Services Section</h1>
            </div>
        </div>
    </div>
</section>

如果“关于”部分的内容太长，则在“服务”部分重叠，因此我在服务部分的“关于”部分中有一部分。

服务部分：包含客户可以向我发送信息的表单，但由于关于部分重叠，关于部分文本在服务表单上

我添加了重要！但它没有用，请帮忙

Answer 1

在所有三个部分的height:100%中删除css scrolling-nav.css。

这将修复错误

Answer 2

嗨，有两种方法可以做到这一点

1）在scrollling-nav.css

的末尾添加这个类

.about-section {
    background: none repeat scroll 0 0 #EEEEEE;
    height: auto !important;
    padding-bottom: 15px !important;
}

或者在scrolling-nav.css中转到第36行并更新高度：100％;高度：自动;

.about-section {
    background: none repeat scroll 0 0 #EEEEEE;
    height: auto;
    padding-bottom: 15px;
    padding-top: 150px;
    text-align: center;
}

你也可以像这样更新.contact-section和.services-section来完全解决这个问题。

带有长文本的Bootstrap高度容器

2 个答案: