Bootstrap页脚生成水平条的问题

Question

我有这个简单的Bootstrap页脚网格https://www.codeply.com/p/3WPEe7KAUK

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <!-- foooter -->
    <footer style="background-color: #0198d1;">
    <div class="row">
    <div class="col-4" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    <div class="col-4 text-center" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    <div class="col-4 text-right" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    </div>
    </footer>
    <!-- END foooter -->

我不明白为什么它会激活浏览器水平scroolbar以及如何将其删除。

Answer 1

这是因为您没有声明行的宽度，所以我将col-12添加到行中，然后其他div根据那里的父div设置它们，而父div都不会溢出它；可以这样完成。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <div style="background-color: #0198d1;" class="row col-12">
                <div class="col-4" style="background-color: #0198d1;">                   <span>test</span>
                </div>
                <div class="col-4 " style="background-color: #0198d1;">
                    <span class="text-center">test</span>
                </div>
                <div class="col-4" style="background-color: #0198d1;">
                    <span class="text-right">test</span>
                </div>
        </div>