个人中心
gpt4 book ai didi

javascript - Bootstrap 4 - 附加侧边栏时无法保持相同的宽度

转载 作者：行者123 更新时间：2023-11-28 01:48:31 25 4
gpt4 key购买 nike

您好，我正在使用 bootstrap 4。在这里，我尝试向侧边栏添加词缀。我为侧边栏添加了三列，并在满足特定条件时固定它们。但问题是当侧边栏附加时宽度正在改变。所以我希望侧边栏在正常和固定时具有相同的宽度。请帮我。提前致谢。 注意:请在桌面 View 中查看 fiddle 。

var toggleAffix = function(affixElement, scrollElement, wrapper) {

  var height = affixElement.outerHeight(),
    top = wrapper.offset().top - 58;

  if (scrollElement.scrollTop() >= top) {
    wrapper.height(height);
    affixElement.addClass("affix");
  } else {
    affixElement.removeClass("affix");
    wrapper.height('auto');
  }

};


$('#top-affix').each(function() {
  var ele = $(this),
    wrapper = $('<div></div>');

  ele.before(wrapper);
  $(window).on('scroll resize', function() {
    toggleAffix(ele, $(this), wrapper);
  });

  // init
  toggleAffix(ele, $(window), wrapper);
});
body {
  padding-top: 3.625rem;
}

.container-fluid {
  max-width: 1300px;
}

.projects-wrp .title {
  background-image: -webkit-gradient(linear, left bottom, right top, from(#0a0b0c), color-stop(#121315), color-stop(#17191b), color-stop(#1d1f22), to(#222529));
  background-image: linear-gradient(to right top, #0a0b0c, #121315, #17191b, #1d1f22, #222529);
  color: #fff;
  padding: 0.75rem;
}

.projects-wrp .title h2 {
  font-size: 1.5rem;
}

.projects-wrp .affix {
  position: fixed;
  top: 3.625rem;
  right: 0;
  left: 0;
  z-index: 1030;
}

.projects-wrp .sidebar-lft h4 {
  font-size: 1.125rem;
}
<!doctype html>
<html lang="en">

<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">
</head>

<body class="projects-wrp" style="height: 1500px;">
  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <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="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
  <div class="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">

          <h2 class="mb-0"> Avacadu.com[Onpage Seo Only]</h2>
        </div>
      </div>
    </div>
  </div>
  <main>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-3" id="top-affix">
          <aside class="sidebar-lft affix-container" style="background: #ccc;">
            <h4><i class="fas fa-clipboard-list"></i> Categories</h4>
            <p class="mb-0">
              <a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            Link with href
                          </a>
            </p>
            <div class="collapse" id="collapseExample">
              <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
            <p>sdfghjkliutrsdfgh</p>
            <p>sdfghjkliutrsdfgh</p>
            <p>sdfghjkliutrsdfgh</p>
            <p>sdfghjkliutrsdfgh</p>
            <p>sdfghjkliutrsdfgh</p>
            <p>sdfghjkliutrsdfgh</p>
            <p>sdfghjkliutrsdfgh</p>
          </aside>
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-9">

        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

最佳答案

一旦侧边栏使用 position:fixed 从 DOM 流中取出，就没有一种简单的方法来保持相对 (%) 宽度。一旦它被“固定”，它就会相对于整个视口(viewport)，而不是页面上的其他元素。此问题已在 many other questions 中解决.

相反，您必须为词缀元素使用定义的宽度:

#top-affix {
  max-width:300px;
}

https://www.codeply.com/go/rKPCFO7zF4

如果你想让侧边栏保持基于相对百分比的宽度，position:sticky 可能是比 position:fixed 更好的选择。

相关:
Inheriting width from Bootstrap container when child is position fixed
How to create a sticky left sidebar menu using bootstrap 3?
Set width of a "Position: fixed" div relative to parent div

关于javascript - Bootstrap 4 - 附加侧边栏时无法保持相同的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50076377/

25 4 0
文章推荐： javascript - jquery mobile 后的文本框样式
文章推荐： c++ - 在不复制缓冲区和内存泄漏的情况下返回指向 vector 数据的指针
文章推荐： javascript - IndexedDB:避免回调 hell
文章推荐： javascript - 使用方法和属性定义 javascript 对象的最佳方法是什么？ (如果可以以原生方式实现)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com