PROSAGA码农传奇-Bootstrap-Bootstrap 3 Navbar Collapse

12 条回复

0#
回复此人
不想吃东西 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想对jmbertucci的回答进行投票和评论，但我还没有被控制信任。我有同样的问题并按照他的说法解决了。如果您使用的是Bootstrap 3.0，请在variables.less中编辑LESS变量。响应断点设置在第200行附近： </p> <pre> <code> @screen-xs: 480px; @screen-phone: @screen-xs; // Small screen / tablet @screen-sm: 768px; @screen-tablet: @screen-sm; // Medium screen / desktop @screen-md: 992px; @screen-desktop: @screen-md; // Large screen / wide desktop @screen-lg: 1200px; @screen-lg-desktop: @screen-lg; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm - 1); @screen-sm-max: (@screen-md - 1); @screen-md-max: (@screen-lg - 1); </code> </pre> <P> 然后使用。设置导航栏的折叠值 <I> @电网浮动断点 </i>的大约232行的变量。默认设置为 <I> @屏平板电脑 </i>的。如果你想要你可以使用像素值，但我更喜欢使用LESS变量。 </p> </DIV>

编辑
1#
回复此人
نسر الصحراء | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="http://getbootstrap.com/customize/#less-variables"> 的<strong> 最简单的方法是自定义引导程序 </强> </A> </p> <P> 找到变量： </p> <pre> <code> @grid-float-breakpoint </code> </pre> <P> 设置为@ screen-sm，您可以根据需要进行更改。希望能帮助到你！ </p> </DIV>

编辑
2#
回复此人
故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 感谢Seb33300，我得到了这个工作。然而，似乎缺少一个重要的部分。至少在Bootstrap 3.1.1版中。 </p> <P> 我的问题是导航栏以正确的宽度相应地折叠，但是菜单按钮不起作用。我无法展开和折叠菜单。 </p> <P> 这是因为collapse.in类被.navbar-collapse.collapse中的！important所覆盖，并且可以通过添加“collapse.in”来解决。 Seb33300的例子在下面完成： </p> <pre> <code> @media (max-width: 991px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-collapse.collapse.in { display: block!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } } </code> </pre> </DIV>

编辑
3#
回复此人
不丶离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我担心自定义Bootstrap后的维护和升级问题。我可以记录今天的自定义步骤，并希望从现在开始三年后升级Bootstrap的人将找到文档并重新应用这些步骤（在那时可能会或可能不会起作用）。我想，可以以任何一种方式进行论证，但我更喜欢在我的代码中保留任何自定义。 </p> <P> 我不太明白Seb33300的方法是如何工作的。它肯定不适用于Bootstrap 4.0.3。要使导航栏以1200而不是768展开，必须覆盖两个媒体查询的规则，以防止在768处扩展并在1200处强制扩展。 </p> <P> 我有一个更长的菜单，可以在纵向模式下包裹在iPad上。以下菜单折叠到1200断点： </p> <pre> <code> @media (min-width: 768px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 15px; padding-left: 15px; } .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block!important; margin-top: 0px; } } @media (min-width: 1200px) { .navbar-header { float: left; } .navbar-toggle { display: none; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { display: block !important; } } </code> </pre> </DIV>

编辑
4#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我使用Bootstrap 3.0.0安装了CSS方式，因为我对LESS并不熟悉。这是我添加到我的自定义css文件（我在bootstrap.css之后加载）的代码，它允许我控制所以菜单总是像 <code> accordion </code> 。 <BR/> 的<strong> 注意： </强> 我包裹了我的整个 <code> navbar </code> 在与班级的div里面 <code> sidebar </code> 分离出我想要的行为，因此它不会影响我网站上的其他导航栏，例如主菜单。根据您的需求进行调整，希望对您有所帮助。 </p> <pre> <code> /* Sidebar Menu Fix */ .sidebar .navbar-nav { margin: 7.5px -15px; } .sidebar .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } .sidebar .navbar-collapse { max-height: 500px; } .sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .sidebar .dropdown-menu > li > a { color: #777777; } .sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333333; background-color: transparent; } .sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555555; background-color: #e7e7e7; } .sidebar .navbar-nav { float: none; } .sidebar .navbar-nav > li { float: none; } </code> </pre> <P> 附加说明：我还添加了对主菜单切换的更改 <code> navbar </code> （因为我网站上面的代码用于旁边的“子菜单”。 </p> <P> 我变了： </p> <pre> <code> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </code> </pre> <P> 成： </p> <pre> <code> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu"> </code> </pre> <P> 然后还调整： </p> <pre> <code> <div class="navbar-collapse collapse navbar-collapse"> </code> </pre> <P> 成： </p> <pre> <code> <div class="navbar-collapse collapse navbar-collapse-topmenu"> </code> </pre> <P> 如果你只有一个 <code> navbar </code> 我猜你不必担心这个问题，但在我的情况下它帮助了我。 </p> </DIV>

编辑
5#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于那些想要在宽度上折叠的人 <EM> 减 </EM> 比标准的768px（扩展宽度小于768px），这是需要的css： </p> <pre> <code> @media (min-width: 600px) { .navbar-header { float: left; } .navbar-toggle { display: none; } .navbar-collapse { border-top: 0 none; box-shadow: none; width: auto; } .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-nav { float: left !important; margin: 0; } .navbar-nav>li { float: left; } .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; } } </code> </pre> </DIV>

编辑
6#
回复此人
离线请留言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这些都是在变量中控制的，不需要在源代码中捣乱。使用bootstrap，首先尝试变量，然后覆盖。然后回去再次尝试变量;） </p> <P> 我使用带有rails的bootstrap-sass，但它与默认的LESS相同。 </p> <pre> <code> FILE: main.css.scss ------------------- // control the screen sizes $screen-xs-min: 300px; $screen-sm-min: 400px; $screen-md-min: 800px; $screen-lg-min: 1200px; // this tells which screen size to use to start breaking on // will tell navbar when to collapse $grid-float-breakpoint: $screen-md-min; // then import your bootstrap @import "bootstrap"; </code> </pre> <P> 而已！这个变量参考页面非常方便： <a href="https://github.com/twbs/bootstrap/blob/master/less/variables.less"> https://github.com/twbs/bootstrap/blob/master/less/variables.less </A> </p> </DIV>

编辑
7#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> nabvar将在小型设备上崩溃。折叠点由变量中的@ grid-float-breakpoint定义。默认情况下，这将在768px之前。对于低于768像素屏幕宽度的屏幕，导航栏将如下所示： </p> <P> <img src =“https://i.stack.imgur.com/spHYT.png”alt =“在此处输入图片说明”/> </p> <P> 可以在variables.less中更改@ grid-float-breakpoint并重新编译Bootstrap。执行此操作时，您还必须在navbar.less中更改@ screen-xs-max。您必须将此值设置为新的@ grid-float-breakpoint -1。也可以看看： <a href="https://github.com/twbs/bootstrap/pull/10465" rel="nofollow noreferrer"> https://github.com/twbs/bootstrap/pull/10465 </A> 。这需要将@ grid-float-breakpoint的导航栏形式和下拉列表更改为其移动版本。 </p> </DIV>

编辑
8#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap 2和Bootstrap 3之间的最大区别在于Bootstrap 3是“移动优先”。 </p> <P> 这意味着默认样式是为移动设备而设计的，对于Navbars，这意味着它默认为“折叠”，当达到某个最小尺寸时“展开”。 </p> <P> Bootstrap 3的网站实际上有一个关于做什么的“提示”： <a href="http://getbootstrap.com/components/#navbar" rel="noreferrer"> http://getbootstrap.com/components/#navbar </A> </p> <BLOCKQUOTE> <P> 自定义折叠点 </p> <P> 根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点。自定义@ grid-float-breakpoint变量或添加您自己的媒体查询。 </p> </BLOCKQUOTE> <P> 如果你要重新编译你的LESS，你会在中找到所提到的LESS变量 <code> variables.less </code> 文件。它目前设置为“扩展” <code> @media (min-width: 768px) </code> 这是Bootstrap 3术语的“小屏幕”（即平板电脑）。 </p> <P> <code> @grid-float-breakpoint: @screen-tablet; </code> </p> <P> 如果你想让折叠时间再长一点，你可以调整它： </p> <P> <code> @grid-float-breakpoint: @screen-desktop; </code> （992px断点） </p> <P> 或者尽早扩大 </p> <P> <code> @grid-float-breakpoint: @screen-phone </code> （480px断点） </p> <P> 如果你想稍后扩展它，而不是处理重新编译LESS，你将不得不覆盖在 <code> 768px </code> 媒体查询并让它们返回到先前的值。然后在适当的时候重新添加它们。 </p> <P> 我不确定是否有更好的方法来做到这一点。根据您的需要重新编译Bootstrap LESS是最好的（最简单的）方式。否则，您必须找到影响Navbar的所有CSS媒体查询，将它们覆盖为默认样式@ 768px宽度，然后以更高的最小宽度将其还原。 </p> <P> 通过更改变量，重新编译LESS将为您完成所有神奇的工作。这是LESS / SASS预编译器的重点。 =） </p> <P> <EM> （注意，我确实看了他们一切，这是大约100行代码，这对我来说已经足够烦恼了，只是为了给定项目重新编译Bootstrap并避免意外搞乱一些事情） </EM> </p> <P> 我希望有所帮助！ </p> <P> 干杯! </p> </DIV>

编辑
9#
回复此人
不见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想我找到了一个简单的解决方案来改变崩溃断点，只能通过css。 </p> <P> 我希望其他人可以证实，因为我没有彻底测试它，我不确定这个解决方案是否有副作用。 </p> <P> 您必须更改以下类定义的媒体查询值： </p> <pre> <code> @media (min-width: BREAKPOINT px ){ .navbar-toggle{display:none} } @media (min-width: BREAKPOINT px){ .navbar-collapse{ width:auto; border-top:0;box-shadow:none } .navbar-collapse.collapse{ display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important } .navbar-collapse.in{ overflow-y:visible } .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{ padding-left:0;padding-right:0 } } </code> </pre> <P> 这对我目前的项目有用，但我仍需要更改一些css定义，以便为所有屏幕尺寸正确排列菜单。 </p> <P> 希望这可以帮助。 </p> </DIV>

编辑
10#
回复此人
一生浮华 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你面临的问题是的<strong> 菜单分成多行 </强> ，您可以尝试以下之一： </p> <P> 1）尽量减少菜单项的数量或长度，例如删除菜单项或缩短单词。 </p> <P> 2）减少菜单项之间的填充，如下所示： </p> <pre> <code> .navbar .nav > li > a { padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */ } </code> </pre> <P> 默认填充为两侧（左侧和右侧）15px。 </p> <P> 如果您希望更改每个单独的用户： </p> <pre> <code> padding-left: 7px; padding-right: 8px; </code> </pre> <P> 此设置也会影响下拉列表。 </p> <P> 这不能回答这个问题，但它可以帮助那些不想搞乱CSS或使用LESS变量的人。解决这个问题的两种常用方法。 </p> </DIV>

编辑

登录后才能参与评论