css 我如何给予每个引导5导航栏按钮间距

tp5buhyn 于 2023-01-18 发布在其他

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

我如何给bootstrap 5导航栏中的每个按钮给予间距，正如你在这里看到的，每个按钮都离它自己更近，但我不喜欢这样，所以我如何给这些按钮设置间距？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        
<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
                <div class="navbar-nav">
              <a class="nav-item btn btn-primary" href="#">Home</a>
              <a class="nav-item btn btn-primary" href="#">Features</a>
              <a class="nav-item btn btn-primary" href="#">Pricing</a>
              <a class="nav-item btn btn-primary" href="#">Disabled</a>
       </div>
   </div>
</nav>

css

来源：https://stackoverflow.com/questions/75146187/how-can-i-give-spacing-to-each-bootstrap-5-navbar-buttons

1条答案

按热度按时间

f45qwnt81#

将Bootstrap类mx-lg-2 mx-0 my-lg-0 my-2添加到所有按钮。
说明：

mx-lg-2 mx-0将在≥ 992px的屏幕上添加左右边距
my-lg-0 my-2将在〈992px的屏幕上添加上边距和下边距

请参见下面的片段。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-nav">
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Home</a>
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Features</a>
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
    </div>
  </div>
</nav>

赞(0）回复(0）举报 2023-01-18

我来回答

css 我如何给予每个引导5导航栏按钮间距

1条答案

相关问题

热门标签

最新问答