相关疑难解决方法(0)

Bootstrap 3.0附加列表更改宽度

我正在迁移到bootstrap 3.0.0并且我在左边有一个附加菜单的问题:一旦它被粘贴(在10px滚动之后),它的宽度就会改变.在这个小提琴中它变得更小,在我的真实网站中它变得更宽,并扩展了实际内容.

它与bootstrap v2.3.2完美配合.检查后看起来列表项目与.affix {position: fixed;}出现的不匹配.

有任何想法吗?

解决方案:基于最新的评论,我最后添加了这个JS片,它可以很好地修复它,而不必为固定元素设置固定宽度:

$(function() {
    var $affixElement = $('div[data-spy="affix"]');
    $affixElement.width($affixElement.parent().width());
});
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap affix twitter-bootstrap-3

34
推荐指数
2
解决办法
1万
查看次数

获得元素的全高度?

我的博客内容divid#content.当我选择它时,例如使用Firebug,它概述了它的全部高度,div其顶部和底部的所有填充和边距.

jQuery height()只返回元素本身的内部高度.

如何查询元素的完整高度?如果其他元素中有很多填充和边距,我希望它们全部加起来并作为一个值.

我应该使用哪种方法?

javascript jquery

24
推荐指数
1
解决办法
4万
查看次数

重置/更改bootstrap词缀的偏移量

如何将Affix(Twitter Bootstrap 3)的偏移量更改为其他值?

当我试图像这样两次调用方法时,第二个似乎被忽略并且没有任何效果:

$('#navbar-main').affix({ offset: 100});
$('#navbar-main').affix({ offset: 200}); // ---> the offset will not change to 200px
Run Code Online (Sandbox Code Playgroud)

在第二次.affix调用之前重置回调affix也无济于事:

$('#navbar-main').affix({ offset: 100});
$(window).off('.affix');
$('#navbar-main').affix({ offset: 200}); // ---> the offset will not change to 200px
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-3

12
推荐指数
2
解决办法
8482
查看次数

使用Bootstrap 4滚动动画/缩小NavBar

我已经搜索了整堆,但似乎无法找到一个有效的解决方案.基本上我的NavBar完全是我想要的.我现在想要缩小NavBar,当我的页面向下滚动时,使用漂亮的平滑过渡(动画)使其变得更加纤细.

这是我当前NavBar的HTML标记:

<header>


      <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You &#8211; Perth Website Branding"></a>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                  <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="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Portfolio</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Blog</a>
                  </li>
              </ul>
          </div>
      </nav>


    </header>
Run Code Online (Sandbox Code Playgroud)

我有什么想法可以达到这个目的吗?我做了很多搜索,但大多数解决方案都是针对Bootstrap …

html css navbar twitter-bootstrap-4 bootstrap-4

2
推荐指数
2
解决办法
3万
查看次数