Bootstrap 5导航条填充移除

0h4hbjxa 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(1)|浏览(175)

我有两个问题想问导航栏首先，我试图找出一种方法来摆脱所有的填充/边缘周围的导航栏项目链接。我有一个左边框和一个背景胡佛的颜色，我试图扩大高度的导航栏。我已经尝试了下面的一些东西，但似乎找不到一种方法来摆脱填充。下图
第二，如果有一个下拉菜单的菜单项，因为文本很宽，它溢出了浏览器的边界，所以被切断了。有没有办法防止它溢出边境？

<nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Users Admin</a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Search</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Dropdown link
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>

.navbar {
    background-color: #0078d2;
    border-color: #0065b1;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.navbar-text,
.navbar-brand,
.navbar-link,
.navbar-nav > li > a {
    color: white !important;
}

.navbar-nav > .active {
    color: red !important;
}

/*.navbar-default .navbar-nav > li {
    margin-top: 0;
    margin-bottom: 0;
}*/

.navbar-default, 
.navbar-nav > li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.navbar-default,
.navbar-nav > li > a:hover,
.navbar-default,
.navbar-nav > li > a:focus {
    background-color: #0065B1;
    /*color: #E2E3E5 !important;*/
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.navbar-nav > li > a {
    border-left: .1rem solid #ccc;
}

更新1

twitter-bootstrap

来源：https://stackoverflow.com/questions/76932866/bootstrap-5-nav-bar-padding-removal

1条答案

按热度按时间

laawzig21#

链接上的填充来自nav-link和navbar-expand-lg类

.nav-link {
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
}

这可以在样式表中使用!important标志轻松地否决

.nav-link {
  padding: 0 !important;
}

或者，您可以向每个链接添加适当的填充类，如p-0。也可以使用断点类。

<a class="nav-link p-0" href="#">

下拉菜单使用left: 0的绝对定位，它将菜单对齐到下拉链接的左侧。您可以通过添加dropdown-menu-end类将菜单对齐方式更改为右侧。

<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">

我还优化了你的CSS选择器，并删除了无效的边距声明。

.navbar {
  background-color: #0078d2;
  border-color: #0065b1;
}

.navbar-brand,
.navbar-link,
.nav-link {
  color: white !important;
}

.active {
  color: red !important;
}

.nav-link:hover,
.nav-link:focus {
  background-color: #0065B1;
  /* color: #E2E3E5 !important; */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-link {
  padding: .5em 0 !important;
  border-left: .1rem solid #ccc !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Users Admin</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Search</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</nav>

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 5导航条填充移除

1条答案

相关问题

热门标签

最新问答