首页 文章

jumbotrons和navbar周围的bootstrap填充？

提问于
浏览 次
0

我正在尝试学习响应式网站的bootstrap基础知识 . 当我将元素放入“行”类时，没有任何边距或填充元素和没有自由空间，但有jumbotron和导航栏等元素然后似乎有填充我不能摆脱左边和右边 . 任何帮助，将不胜感激 .

<nav class="navbar navbar-expand-lg navbar-expand-md">
    <a class="navbar-brand" href="#">lorem ipsum</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">about</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">contact</a>
            </li>
        </ul>
      </div>
  </nav>
  <div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
    <div class="container-fluid">
        <h1 class="display-4">lorem ipsum</h1>
        <p class="lead">lorem ipsum</p>
      </div>
  </div>
  <div class="row newsletter">
      <p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
    <form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
        <input type="email" placeholder="enter your email..." class="box">
        <button type="submit" class="button">></button>
      </form>
  </div>
html css

2 回答

  • 0

    Boostrap默认情况下在导航栏上应用填充，您只需执行以下操作即可删除左右填充：

    .navbar.custom-navbar {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

    在 <nav> 元素上应用 custom-navbar class .

    要移除jumbotron左右填充，请删除_mboutron内部的 <div class="container-fluid"> ：

    <div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
        <h1 class="display-4">odtom.com</h1>
        <p class="lead">a site showcasing everything odt.</p>
    </div>

    同样要从页面中删除水平滚动， row 在 conatiner-fluid 内 .

    <div class="container-fluid">
        <div class="row newsletter">
            <p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
            <form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
                <input type="email" placeholder="enter your email..." class="box">
                <button type="submit" class="button">></button>
            </form>
        </div>
    </div>
    回复于
  • 0

    我不确定这是否会回答你的问题，但是jumbotron元素中的左右填充来自“.container-fluid”类 . 您似乎使用“.jumbotron-fluid”类来定位容器，该类是当前设置为向左和向右填充到0px的类 .

    如果这是您需要的，只需将此类目标移除或修改填充 .

    .container-fluid {
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
    回复于

相关问题