Bootstrap 3.0 的行有 margin-left 15px 和 margin-right 15px答案

【问题标题】：Bootstrap 3.0's row have margin-left 15px and margin-right 15pxBootstrap 3.0 的行有 margin-left 15px 和 margin-right 15px
【发布时间】：2017-12-27 23:58:53
【问题描述】：

<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，遇到这样一个问题，为什么我创建一个他有一个margin left/right 15px，我的屏幕宽度1263px，因为这些字段好像有水平滚动，在1293px字段之后，那么每增加一个新行，这个问题怎么解决呢？

Just my template

Screenshoot my console

【问题讨论】：

向我们展示您的HTML 和CSS。 .row 中有 .col 吗？ .row 是否在任何 .container 中？
好的，我发布了

标签： html twitter-bootstrap css

【解决方案1】：

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

容器元素的左右内边距为 15px。行的左侧和右侧都有 15px 的负边距，这将补偿容器使用的空间（用于填充）。这样您的行将 100% 显示在屏幕上并避免水平滚动。

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：