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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

回答：

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

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

回答：

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

以上是 引导3.0的行具有利润率左15px的利润率和右15px的 的全部内容， 来源链接： utcz.com/qa/265570.html

回到顶部