html - 为什么bootstrap简单的全宽布局会导致溢出

Question

当我在努力理解前端开发概念时，我有以下问题:

我正在使用 Bootstrap 开发一个简单的布局。该页面将采用全宽布局，因此在我开始编码后，我注意到窗口中有一个水平滚动条。用溢出隐藏来破解它对我来说似乎不对。有人可以解释为什么会发生这种情况以及如何避免这种情况吗？

附带问题，这是像下面这样的 header 的正确标记吗？ /////// header //////

---Link----------------------------------------------------------------LINK
---Logo----------main-navigation---------------------------------------Link

    <div id="wrapper">
        <header id="masthead" class="site-header" role="banner">
            <div id="top-header">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
            </div>
            <div id="bottom-header" class="row">
                    <div id="left-header" class="col-md-3">
                        <div class="logo">
                            <img src="<?php echo get_site_url().'/wp-content/themes/test-theme/img/logo.png'?>" alt=""/>
                        </div>
                    </div>
                    <div id="right-header" class="col-md-9">
                        <div class="main-navigation">
                            <?php wp_nav_menu('main-menu'); ?>
                        </div>
                    </div>
            </div>
        </header><!-- #masthead -->
<div id="content">
    Content here
</div>
</wrapper>

Answer 1

按照@Lalji Tadhani 的建议去做。然后你像这样制作一个 css 选择器:

.noPadding {
    padding:0px;
}

现在您可以将此类添加到不需要填充的 html 元素中。 使用框架时，您总是会遇到不适合您的事情。您只需要找到一种干净的方法来解决它。

关于标题的问题: 对链接使用无序列表可能在语义上更正确。但其余的似乎还不错。