为了账号安全,请及时绑定邮箱和手机立即绑定

HTML 和 CSS 填充所有 DIV

HTML 和 CSS 填充所有 DIV

慕的地10843 2023-12-19 16:52:32
我有这个带图标的导航栏: 在此处输入图像描述图标位于 DIV 的中心,但我想要的是填充所有 DIV,然后左右没有空格。包含它的 DIV 是这样的: 在此处输入图像描述我的是一个 REACT 应用程序,我也使用 bootstrap。 我尝试添加 margin-left: 0 和 margin right-right: 0,但这不起作用。这是 HTML 代码<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">   <div class="bottom-nav navbar-nav" style="height: 100%; margin: 0px auto;">      <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">        ICON      </a>      <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">         ICON      </a>   </div></nav>不要忘记我使用 bootstrap,谢谢。你能帮助我吗? 谢谢
查看完整描述

1 回答

?
jeck猫

TA贡献1909条经验 获得超7个赞

只需添加一个自定义类并为您的导航提供全宽。您的导航有display: flex;。因此您可以使用 justify-content: space-between; 来分发您的图标:


.custom-nav {

  justify-content: space-between;

  width: 100%;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">

  <div class="bottom-nav navbar-nav custom-nav" style="height: 100%; margin: 0px auto;">

    <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">

      <i class="fas fa-star"></i>

    </a>

    <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">

      <i class="fas fa-glass-cheers"></i>

    </a>

    <a href="#restaurant" data-rb-event-key="#restaurant" class="nav-icon fa-2x nav-link">

      <i class="fas fa-utensils"></i>

    </a>

    <a href="#store" data-rb-event-key="#store" class="nav-icon fa-2x nav-link">

      <i class="fas fa-store"></i>

    </a>

  </div>

</nav>


查看完整回答
反对 回复 2023-12-19
  • 1 回答
  • 0 关注
  • 63 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信