引导3.0的行具有利润率左15px的利润率和右15px的

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

我最近开始学习引导，并面临着这样一个问题，为什么当我创建一个他有一个保证金左/ right 15px，我的屏幕宽度为1263px，因为这些字段好像有水平滚动，1293px字段之后，等等每一个新行，如何解决这个问题？

Just my template

Screenshoot my console

来源

2017-12-27 Kolesnik Vladislav

向我们展示你的'HTML'和'CSS'。 '.row'中有'.col'吗？任何'.container'中的'.row'？ –

好吧，我发表了它 –

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

来源

2017-12-27 14:21:20

行必须放置在.container（固定宽度）或.container-fluid（全宽度）范围内才能正确对齐和填充。您必须为容器提供1263像素的宽度，并且您应该使用行来避免水平滚动。

容器元素的左右两边会有15px的填充。行在左右两边都会有15px的负边距，这将包含容器使用的空间（用于填充）。这样你的行就会在你的屏幕上显示100％，并避免水平滚动。

来源

2017-12-27 14:36:04

我发布了我的代码 –

谢谢）我解决了我的问题，只是第二行是在容器外 –

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

来源

2017-12-27 15:58:53

引导3.0的行具有利润率左15px的利润率和右15px的

回答

相关问题