Pourquoi la mise en page simple pleine largeur de bootstrap provoque-t-elle un débordement ?

Question

Comme j'ai du mal à comprendre les concepts de développement frontal, j'ai la question suivante :

Je développe une mise en page simple avec Bootstrap . La page va être en pleine largeur et après avoir commencé à coder, j'ai remarqué une barre de défilement horizontale dans la fenêtre. Le détourner avec overflow-hidden ne me semble pas correct. Quelqu'un peut-il m'expliquer pourquoi cela se produit et comment l'éviter ?

Question secondaire, est-ce le bon balisage pour un en-tête comme celui ci-dessous ? /////// En-tête //////

---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

Faites comme @Lalji Tadhani l'a suggéré. Ensuite, vous faites un sélecteur css comme ceci :

.noPadding {
    padding:0px;
}

Vous pouvez maintenant ajouter cette classe à vos éléments html où vous n'avez pas besoin du padding. Vous rencontrerez toujours des choses qui ne vous conviennent pas lorsque vous utilisez des frameworks. Il vous suffit de trouver un moyen propre de les contourner.

En ce qui concerne votre question sur l'en-tête : Il est peut-être sémantiquement plus correct d'utiliser une liste non ordonnée pour les liens. Mais le reste semble correct.

Answer 2

Envelopper ce html dans un div avec cette classe container-fluid

     <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 class="container-fluid">
                    <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>
</div>
                </header><!-- #masthead -->
        <div id="content">
            Content here
        </div>

    </div>

Answer 3

Il doit y avoir un problème de marge . Ajoutez ce style dans votre page :

body  {  
margin : 0px;  
} 

À mon avis, cela résoudra votre problème.