html - Bootstrap 容器相互 float

Question

我不明白为什么这个 Bootstrap 代码将容器重叠在一起。我看过其他一些遇到此问题的人，但我认为我的代码没有相同的错误。我想当我应该使用 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

删除所有 position:absolute 属性。您将所有这些元素放在彼此之上。