Question

我有一个Umbraco网站，我正在与Bootstrap集成。我已经使用导航菜单创建了一个局部视图，除了导航栏之外，一切似乎都按预期工作。

因此，当您单击按钮时，它会展开，但会立即快速向上捕捉。当你将它切换回来时，它几乎“突然存在”并向后移动以关闭。这是DOM的整个输出

<html class="gr__localhost"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title></title>
    <link rel="stylesheet" href="/css/master_styles.css">
<style>@media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>



    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Pumpkin's Blog</h1>
                <p>Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture&nbsp;</li>
</ul>
<p>I hope you stick around and comment.&nbsp;</p>
            </div>
        </div>
    </div>
    <div id="footer">
        Copyright 2018
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>

Answer 1

你正在使用bootstrap 3.3.7 js和bootstrap 4 css！

＆＃13;

<html class="gr__localhost"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Pumpkin's Blog - Meow</title>
    <link rel="stylesheet" href="/css/master_styles.css">
<style>@media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>



    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Pumpkin's Blog</h1>
                <p>Hi! I'm Pumpkin. Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture&nbsp;</li>
</ul>
<p>I hope you stick around and comment.&nbsp;</p>
            </div>
        </div>
    </div>
    <div id="footer">
        Copyright 2018
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>

＆＃13;

切换

1 个答案: