Question

＆＃13;

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

＆＃13;

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

Just my template

Screenshoot my console

Answer 1

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

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

Answer 2

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

Answer 3

＆＃13;

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

＆＃13;

Bootstrap 3.0的行有剩余边距15px和边距右15px

3 个答案: