Bootstrap 3.0的行的左边距为15px，右边距为15px

Question

 <header> <div class="container"> <div class="row"> <div class="col-lg-2 logo"> <img src="img/logo.png" alt="Logotype"> </div> <div class="col-lg-7 col-lg-offset-3"> <ul class="menu"> <li class="menu-item"><a href="#">Home</a></li> <li class="menu-item"><a href="#">About</a></li> <li class="menu-item"><a href="#">Expertise</a></li> <li class="menu-item"><a href="#">Teams</a></li> <li class="menu-item"><a href="#">Works</a></li> <li class="menu-item"><a href="#">People say</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> </div> </div> </div> <div class="row text-center content-wrapper"> <div class="col-lg-12 content-header"> <h1 class="title">We Are Awesome Creative Agency</h1> <p class="description-header"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem<br> quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh<br> vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. </p> <div class="button"> <a class="content-button">LEARN MORE</a> </div> </div> </div> </header> 

我最近开始学习Bootstrap并遇到这样的问题，为什么当我创建一个Bootstrap时，他的左边/右边距为15px，屏幕的宽度为1263px，因为这些字段在1293px字段之后似乎具有水平滚动，所以每个新排，如何解决这个问题？

只是我的模板

对控制台进行屏幕截图

Answer 1

必须将行放置在.container（固定宽度）或.container-fluid（全角）内，以便正确对齐和填充。 您必须为容器及其内部提供1263px的宽度，并应使用行来避免水平滚动。

容器元素的左右两侧都有15px的填充。 行的左右两侧都将有15px的负边距，这将扩大容器使用的空间（用于填充）。 这样您的行将在屏幕上100％出现，并避免水平滚动。

Answer 2

尝试margin-left: 0px; 和margin-right: 0px 。 然后将其设置为margin: 0 auto并将width更改为width: 100% 。 如果没有的话，这可能会有所帮助，我可能需要您的代码片段来摆弄它。

Answer 3

 <header> <div class="container"> <div class="row"> <div class="col-lg-2 logo"> <img src="img/logo.png" alt="Logotype"> </div> <div class="col-lg-7 col-lg-offset-3"> <ul class="menu"> <li class="menu-item"><a href="#">Home</a></li> <li class="menu-item"><a href="#">About</a></li> <li class="menu-item"><a href="#">Expertise</a></li> <li class="menu-item"><a href="#">Teams</a></li> <li class="menu-item"><a href="#">Works</a></li> <li class="menu-item"><a href="#">People say</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> </div> </div> <div class="row text-center content-wrapper"> <div class="col-lg-12 content-header"> <h1 class="title">We Are Awesome Creative Agency</h1> <p class="description-header"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem<br> quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh<br> vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. </p> <div class="button"> <a class="content-button">LEARN MORE</a> </div> </div> </div> </div> </header>