如何在Bootstrap中创建水平滚动导航?

Matoe

该小提琴所示,在Bootstrap中添加太多元素.nav会导致它仅垂直向下添加项目。我将如何限制其高度并使它水平滚动?

戴维

首先,您需要告诉ul不要卷动并溢出到滚动条中。这样,li元素就不必浮动并且可以内联显示。这样做:

ul.nav {
    white-space: nowrap;
    overflow-x: auto;
}

ul.nav li {
    display: inline-block;
    float: none;
}

小提琴:http : //jsfiddle.net/bmfcd3zt/8/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap 3:页眉创建水平滚动

来自分类Dev

如何在HTML和CSS中创建水平列?

来自分类Dev

如何在HTML和CSS中创建水平列?

来自分类Dev

如何在iOS中动态创建水平重复图像

来自分类Dev

Xamarin Forms - 如何在 xaml 中创建水平 ListView?

来自分类Dev

创建水平滚动的UL

来自分类Dev

使用Bootstrap Columns创建水平滚动的List Item视图

来自分类Dev

如何在较小的屏幕上居中放置图像而不创建水平滚动条?

来自分类Dev

如何在没有滚动条的情况下创建水平可滑动菜单?

来自分类Dev

如何使用卡片创建水平滚动的RecyclerView

来自分类Dev

如何为div创建水平滚动条

来自分类Dev

在菜单中滑动以创建水平滚动条

来自分类Dev

创建水平滚动ionic / angularjs

来自分类Dev

创建水平滚动div的循环

来自分类Dev

如何在PDF中创建水印

来自分类Dev

如何在不使用display:block;的情况下创建水平滚动表?overflow-x:自动?

来自分类Dev

RecyclerView Horizontal Scrollview 示例 如何创建水平 recyclerview ?水平滚动视图示例

来自分类Dev

在网页上,如何创建水平滚动而不是切换到下一行?

来自分类Dev

防止100vw创建水平滚动

来自分类Dev

引导表防止创建水平滚动条

来自分类Dev

添加自动幻灯片已创建水平滚动?

来自分类Dev

如何在垂直列表视图内部创建水平列表视图?

来自分类Dev

如何在垂直列表视图内部创建水平列表视图?

来自分类Dev

如何在quote或blockquote标签上创建水平线

来自分类Dev

Bootstrap中的水平下拉菜单不会随着导航滚动

来自分类Dev

如何在引导程序3中使导航选项卡水平滚动?

来自分类Dev

为什么会出现y:隐藏在我的flex布局中创建水平滚动条?

来自分类Dev

如何使用 MVVM-Cross 在 Xamarin.Android 中创建水平 MvxListView

来自分类Dev

如何在Bootstrap中创建可滚动的列?

Related 相关文章

  1. 1

    Bootstrap 3:页眉创建水平滚动

  2. 2

    如何在HTML和CSS中创建水平列?

  3. 3

    如何在HTML和CSS中创建水平列?

  4. 4

    如何在iOS中动态创建水平重复图像

  5. 5

    Xamarin Forms - 如何在 xaml 中创建水平 ListView?

  6. 6

    创建水平滚动的UL

  7. 7

    使用Bootstrap Columns创建水平滚动的List Item视图

  8. 8

    如何在较小的屏幕上居中放置图像而不创建水平滚动条?

  9. 9

    如何在没有滚动条的情况下创建水平可滑动菜单?

  10. 10

    如何使用卡片创建水平滚动的RecyclerView

  11. 11

    如何为div创建水平滚动条

  12. 12

    在菜单中滑动以创建水平滚动条

  13. 13

    创建水平滚动ionic / angularjs

  14. 14

    创建水平滚动div的循环

  15. 15

    如何在PDF中创建水印

  16. 16

    如何在不使用display:block;的情况下创建水平滚动表?overflow-x:自动?

  17. 17

    RecyclerView Horizontal Scrollview 示例 如何创建水平 recyclerview ?水平滚动视图示例

  18. 18

    在网页上,如何创建水平滚动而不是切换到下一行?

  19. 19

    防止100vw创建水平滚动

  20. 20

    引导表防止创建水平滚动条

  21. 21

    添加自动幻灯片已创建水平滚动?

  22. 22

    如何在垂直列表视图内部创建水平列表视图?

  23. 23

    如何在垂直列表视图内部创建水平列表视图?

  24. 24

    如何在quote或blockquote标签上创建水平线

  25. 25

    Bootstrap中的水平下拉菜单不会随着导航滚动

  26. 26

    如何在引导程序3中使导航选项卡水平滚动?

  27. 27

    为什么会出现y:隐藏在我的flex布局中创建水平滚动条?

  28. 28

    如何使用 MVVM-Cross 在 Xamarin.Android 中创建水平 MvxListView

  29. 29

    如何在Bootstrap中创建可滚动的列?

热门标签

归档