Question

我正在使用Twitter Bootstrap来处理网站的响应方面。我有一个问题，但折叠菜单越过页面内容的宽度越小，而不是推下它。

我用这个例子来构建我的导航：

http://getbootstrap.com/examples/navbar-fixed-top/

看一下这个例子，它也没有推动内容。

我已经看到了一些在身体上使用填充的答案，但这对我没有用。我也试过在某些元素上加溢，但它没有区别。

我的导航代码是：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <h1 class="logo-title">
            <a href="index.html"><span>Logo</span></a>
        </h1>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

我是响应式设计的新手，已经看到许多网站都使用折叠菜单推送内容。像这样折叠菜单是一种好习惯还是纯粹的偏好？

我的主要问题是，当折叠菜单处于活动状态时，如何才能推送内容？

提前感谢您的帮助。

Answer 1

如果您使用的是fixed导航栏，则菜单不会下推内容。为此，您必须使用static标头本身。检查您提供的bootstrap示例链接作为参考。

<nav class="navbar navbar-light bg-light navbar-expand-lg static-top">

Answer 2

我不知道。这似乎有用......（虽然有点黑客）。

.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}

Answer 3

第1部分：我所做的是包装你想要移动的所有元素

＆＃13;

var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("push");

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

＆＃13;

form {
  max-width: 500px;
  margin: 0px auto;
  text-align: center;
}

input, textarea {
  border: 3px solid #f47909;
  padding-bottom: 10px;
}

input:focus, textarea:focus {
  outline: none;
  border: 3px solid #f2a25a;
}

label {
  display: block;
  margin-bottom: 20px;
}

span {
  display: block;
}

textarea {
  max-height: 200px;
  height: 200px;
  width: 300px;
  max-width: 300px;
}


/*rest same as index.css*/

*{
  font-family: 'futura';
}

.navvy {
  border-radius: 0px;
  margin: 0px;
  height: 70px;
  padding-top: 5px;
}

@media screen and (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    li{
      padding-right: 30px;
      font-size: 19px;
    }
}

@media screen and (max-width: 767px) {
    .navbar-collapse {
      margin-top: 15px;
      background-color: #FAFAFA;
    }
    li {
      font-size: 17px;
    }
}

.icon-bar {
  background-color: #337ab7;
}

.icon-bar-light {
  background-color: #23527C;
}

#li-back:hover {
  background-color: #FAFAFA;
  font-size: 20px;
  font-weight: bolder;
}

.navbar-brand {
  font-size: 25px;
  color: #1d78c6;
}

#footer {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px dotted #8bc771;
  text-align: center;
}

#description {
  margin-top: 20px;
  text-align: center;
  font-size: 30px;
}

.push{
  transition: transform 0.5s;
  transform: translate(0px, 160px);
}

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

＆＃13;

<!doctype html>
<html lang="en">
<head>
    <title>VirusFun</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

    <link rel="stylesheet" href="/css/contacts.css" type="text/css">

</head>
<body>
  <div class="introPic">

  </div>
  <nav class="navbar navbar-default navbar-static-top navvy">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">Virus Fun</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
        <ul class="nav navbar-nav">
          <li><a id="li-back" href="index.html">Home</a></li>
          <li><a id="li-back" href="gallery.html">Gallery</a></li>
          <li><a id="li-back" href="#">About</a></li>
          <li><a id="li-back" href="contacts.html">Contacts</a></li>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="push" class="">
    <!--The blurb -->
    <p id="description">Ask whatever you want!</p>

    <!-- The body -->
    <div class="container-fluid">
      <form action="https://formspree.io/jackgong48@gmail.com"
        method="POST">

        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <label id="name">
              <span>Your Name</span>
              <input tabindex="1" placeholder="John Smith" type="text" name="name">
            </label>
          </div>
          <div class="col-sm-6 col-xs-6">
            <label id="email">
              <span>Your Email</span>
              <input tabindex="2" placeholder="johnsmith@gmail.com" type="email" name="Sender">
            </label>
          </div>
        </div>

        <label>
          <span>Your Message</span>
            <textarea tabindex="3" name="message"></textarea>
        </label>
        <div class="send">
            <input tabindex="4" type="submit" value="Send">
        </div>
      </form>
    </div>
    <footer id="footer">
        <p>© 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
    </footer>
  </div>

    <!--need this code to be declared before javascript-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="/javascript/javascript.js"></script>

    <script src="jquery/jquery-3.1.1.min.js"></script>

</body>
</html>

＆＃13;

有一个div 然后给它一个id，我们稍后会用javascript获取id 之后在同一个div中创建一个空类

第2部分：转到您的CSS并添加转换。不要担心，如果你不知道我在这里有源代码---＆gt;

.push{
    transition: transform 0.5s;
    transform: translate(0px, 160px);
}

虽然这个类不在id的div中，但javascript很快就会处理这个问题。提示：如果您想了解元素将如何恢复到原始位置，请添加另一个转换，以便它何时重新启动---＆gt;

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

翻译测量基于twitter bootstrap折叠菜单，里面有4个元素。

第3部分： javascript！找到折叠菜单的按钮。应该是这样的 - ＆gt;

<button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">'

正如您所看到的，与getbootstrap.com示例有所不同。我添加了一个icon-bars类。这是我可以用 - ＆gt;

找到的

var icon = document.getElementsByClassName("icon-bars");

您还需要找到包含需要按下的元素的div。

var pushDown = document.getElementById("push");

现在这是多汁的部分！

我将向您展示如何在jquery中执行此操作。这里是代码，解释位于底部---＆gt;

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

说明： - 我们首先声明这是jquery。

- 然后我将通过将click的事件处理程序添加到图标列表中的第一个元素来检查是否单击了切换折叠按钮。因为我只创建了一个图标栏类，所以列表的第一个元素将始终是我的目标。

- 接下来，我将检查是否应该使元素向上或向下滑动，具体取决于类是否与条件语句匹配。即使您从未尝试过hasClass函数，也不需要对逻辑进行太多解释，因为它非常简单。

多数民众赞成。

对接.......它还不好。有一个错误，如果你双击切换按钮，折叠菜单转换还没有完成，所以我们的推送转换恢复顺序颠倒顺序。在这里试试吧。希望会有一些帮助。

PS。忽略我的代码段中的所有样式

-Jack 初学者前端Web开发人员

答案 3 :(得分：1)

有很多方法可以做到这一点。

一种方法是在.container上切换一个类，或者将任何元素包装在导航下方。

例如：

.container {
  transition: padding 500;
}

.container-is-open {
  padding-top:200px;
}

答案 4 :(得分：1)

另外，为避免在导航栏下方创建空白区域，请将以下行添加到导航栏后面的第一个“div”，例如：jumborton

.jumbotron {
    margin-top: -20px;
}

答案 5 :(得分：1)

就我而言，它改变了这个

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

这个

<!-- Update using navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">

并从中编辑我的CSS：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 70px 0 30px 0px;
}

到此：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}

答案 6 :(得分：1)

navbar-fixed-top。

这样可以防止手风琴的下推本机属性。你必须用你自己的javascript或css按摩它。

答案 7 :(得分：0)

这个工作!!

此问题和所有答案都归结为静态导航栏，而不是您正在寻找的。

在导航栏之后但在内容开始之前抛出一个空白div标签（带有高度）。这个空div将内容向下推，并保持隐藏在导航栏后面。使用javascript / jquery在两个移动宽度的div上切换。

HTML

</nav>
<div class="container main">
<div id="pushContent"></div>

CSS

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

使用Javascript / jquery的

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

答案 8 :(得分：0)

在data-target中提及一个“id”，并在“div”中添加具有折叠导航条代码的“id”。如下：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h1 class="logo-title">
                <a href="index.html"><span>Logo</span></a>
            </h1>
          </div>
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">item1</a></li>
              <li><a href="#">item2</a></li>
              <li><a href="#">item3</a></li>
              <li><a href="#">item4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

此data-target会调用特定的“id”，并且您的导航栏将会切换。

答案 9 :(得分：0)

我遇到了同样的问题，查看了答案，但由于他们不适合我而感到困惑。因此，我想到了对容器进行动画处理以使其上下移动的想法。我只是在按下折叠按钮时更改容器的margin-top属性。这是我的代码段：

const profileBtn=document.querySelector('#profile-btn');
const arrow=document.querySelector('#arrow');
const menu = document.querySelector(".home-menu");
function changeArrow() {
    if (arrow.className === 'fas fa-angle-double-down') {
        arrow.className = 'fas fa-angle-double-up';
        moveDown();
    }
    else{
        arrow.className = 'fas fa-angle-double-down';
        moveUp();
    }
};

profileBtn.addEventListener('click',changeArrow);

function moveDown() {
  var pos = 80;
  var id = setInterval(frame1, 1);
  function frame1() {
    if (pos === 188) {
      clearInterval(id);
    } else {
      pos+=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

function moveUp() {
  var pos = 188;
  var id = setInterval(frame2, 1);
  function frame2() {
    if (pos === 80) {
      clearInterval(id);
    } else {
      pos-=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

.home-menu{
    height:auto;
    width: 70%;
    background: #E3AFBC;
    box-shadow: 2px 2px 20px #9A1750;
    border-radius: 10px;
    color: white;
    margin-top: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <!-- Bootstrap CSS framework -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">

    <!-- Fontawesome icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
          integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
          crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Title</title>
</head>
<body>
<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" id="profile-btn">
      <i class="fas fa-angle-double-down" id="arrow"></i>
    </button>
  </nav>
</div>

<div class="container home-menu">
  <br>
  <a href="#" type="button" class="btn btn-block" style="color: white" data-toggle="modal" data-target="#aboutfamily"><span class="fas fa-user-friends" style="margin-right: 0.6em">
  </span>
    About the Family</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="far fa-calendar-alt" style="margin-right: 0.6em"></span>
    Family Calendar</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="fas fa-mail-bulk" style="margin-right: 0.6em"></span>
    Send Email to everyone</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="far fa-address-book" style="margin-right: 0.6em"></span>
    Contacts</a>
  <br>
</div>


<!-- jquery cdn-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
</script>
<!-- icons -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
</script>
<!-- bootstrap javascript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
</script>
<script src="new.js"></script>
</body>
</html>

Answer 4

有很多方法可以做到这一点。

一种方法是在.container上切换一个类，或者将任何元素包装在导航下方。

例如：

.container {
  transition: padding 500;
}

.container-is-open {
  padding-top:200px;
}

Answer 5

另外，为避免在导航栏下方创建空白区域，请将以下行添加到导航栏后面的第一个“div”，例如：jumborton

.jumbotron {
    margin-top: -20px;
}

Answer 6

就我而言，它改变了这个

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

这个

<!-- Update using navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">

并从中编辑我的CSS：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 70px 0 30px 0px;
}

到此：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}

Answer 7

navbar-fixed-top。

这样可以防止手风琴的下推本机属性。你必须用你自己的javascript或css按摩它。

Answer 8

这个工作!!

此问题和所有答案都归结为静态导航栏，而不是您正在寻找的。

在导航栏之后但在内容开始之前抛出一个空白div标签（带有高度）。这个空div将内容向下推，并保持隐藏在导航栏后面。使用javascript / jquery在两个移动宽度的div上切换。

HTML

</nav>
<div class="container main">
<div id="pushContent"></div>

CSS

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

使用Javascript / jquery的

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

Answer 9

在data-target中提及一个“id”，并在“div”中添加具有折叠导航条代码的“id”。如下：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h1 class="logo-title">
                <a href="index.html"><span>Logo</span></a>
            </h1>
          </div>
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">item1</a></li>
              <li><a href="#">item2</a></li>
              <li><a href="#">item3</a></li>
              <li><a href="#">item4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

此data-target会调用特定的“id”，并且您的导航栏将会切换。

Answer 10

我遇到了同样的问题，查看了答案，但由于他们不适合我而感到困惑。因此，我想到了对容器进行动画处理以使其上下移动的想法。我只是在按下折叠按钮时更改容器的margin-top属性。这是我的代码段：

const profileBtn=document.querySelector('#profile-btn');
const arrow=document.querySelector('#arrow');
const menu = document.querySelector(".home-menu");
function changeArrow() {
    if (arrow.className === 'fas fa-angle-double-down') {
        arrow.className = 'fas fa-angle-double-up';
        moveDown();
    }
    else{
        arrow.className = 'fas fa-angle-double-down';
        moveUp();
    }
};

profileBtn.addEventListener('click',changeArrow);

function moveDown() {
  var pos = 80;
  var id = setInterval(frame1, 1);
  function frame1() {
    if (pos === 188) {
      clearInterval(id);
    } else {
      pos+=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

function moveUp() {
  var pos = 188;
  var id = setInterval(frame2, 1);
  function frame2() {
    if (pos === 80) {
      clearInterval(id);
    } else {
      pos-=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

.home-menu{
    height:auto;
    width: 70%;
    background: #E3AFBC;
    box-shadow: 2px 2px 20px #9A1750;
    border-radius: 10px;
    color: white;
    margin-top: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <!-- Bootstrap CSS framework -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">

    <!-- Fontawesome icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
          integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
          crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Title</title>
</head>
<body>
<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" id="profile-btn">
      <i class="fas fa-angle-double-down" id="arrow"></i>
    </button>
  </nav>
</div>

<div class="container home-menu">
  <br>
  <a href="#" type="button" class="btn btn-block" style="color: white" data-toggle="modal" data-target="#aboutfamily"><span class="fas fa-user-friends" style="margin-right: 0.6em">
  </span>
    About the Family</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="far fa-calendar-alt" style="margin-right: 0.6em"></span>
    Family Calendar</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="fas fa-mail-bulk" style="margin-right: 0.6em"></span>
    Send Email to everyone</a>
  <hr style="border: 1px solid white;">
  <a href="#" type="button" class="btn btn-block" style="color: white"><span class="far fa-address-book" style="margin-right: 0.6em"></span>
    Contacts</a>
  <br>
</div>


<!-- jquery cdn-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
</script>
<!-- icons -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
</script>
<!-- bootstrap javascript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous">
</script>
<script src="new.js"></script>
</body>
</html>

Bootstrap折叠菜单在展开时不会推送内容

10 个答案: