时间戳

首页 > 解决方案 > 扩展窗口的引导 div 字段

html - 扩展窗口的引导 div 字段

问题描述

我有两个 div 字段导致窗口向右滚动。我不明白如何更改重量或长度，以便窗口只能上下滚动而不是左右滚动。

这是处理下拉菜单的导航栏的一部分

    <span class="navbar-text" class="w-25">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Account
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Register</a>
              <a class="dropdown-item" href="#">Login</a>
              <a class="dropdown-item" href="#">Advertise</a>
            </div>
          </li>
        </ul>

这是下拉菜单。您可以看到，当下拉菜单展开时，您必须在页面上向右滚动才能看到下拉框

这些卡片的 div 框也太大，导致页面向右滚动

  <section class="features-icons bg-white text-center">
    <h1>
      <center><b>Explore Rentals in Island</b></center>
    </h1>
    <div class="card-deck">
      <div class="card">
        <img class="card-img-top" src="./img/home-icon.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Name</h5>
          <p class="card-text">Location</p>
          <p class="card-text">Price</p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="./img/home-icon.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Name</h5>
          <p class="card-text">Location</p>
          <p class="card-text">Price</p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="./img/home-icon.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Name</h5>
          <p class="card-text">Location</p>
          <p class="card-text">Price</p>
        </div>
      </div>
    </div>
    <br>
    <br>
    <button type="button" class="btn btn-primary btn-lg">View More</button>
  </section>

导航栏错误的图像

卡箱错误的图像

标签： htmlcssbootstrap-4

解决方案

考虑这个代码片段。

section.features-icons.bg-white.text-center{
  overflow: hidden;
  width: 100%;
}

[aria-labelledby="navbarDropdownMenuLink"]{
  margin-left: -53px;
}

推荐阅读