Bootstrap容器漂浮在彼此之上

Question

我无法弄清楚为什么这个bootstap代码将容器重叠在一起。我看过其他一些有这个问题的人，我不认为我的代码有同样的错误。我想我应该在使用bootstrap的时候写css。

jsfiddle：http://jsfiddle.net/qqxudtst/1/

代码：

<section class="section" id="homeHeader">
    <div class="container-fluid">
        <div class="background-img">
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="text-center">
                    <div class="row">
                       <div class='text-justify content-spacing col-lg-7 col-md-12 col-sm-12'>
                          <h2>SomeContest:</h2>
                          <h1>Before and After: A Story</h1>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>

                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <a class="btn btn-default btn-block" id="submitVideo">Submit Video</a>
                        </div>
                        <div class="col-sm-6">
                            <p id="contactSupport">Questions? Contact <a href="#">support</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section" id="tabContent">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p> 
    </div>
</section>

感谢任何帮助/想法。

-AA

Answer 1

删除所有位置：绝对属性。您将所有这些元素放在彼此之上。