css - Twitter bootstrap 3 how to activate navbar-collapse on small devices -
I am using Bootstrap 3.0 and am working on a mobile site. I'm trying to figure out how to show and activate nbar-toggle when viewing tablet device (small / SM device) because navbar-collapse only works on additional small devices There is no problem while using Bootstrap 2
& lt; Nav class = "navbar navbar-inverse navbar-default-top" role = "navigation" style = "border: 0 px; background: # f 26522;" Align = "center" & gt; & Lt; Div class = "colonel-lg-3 kali-md-3 ko-sm-12" style = "background-color: #ffiff; height: 192px;" Align = "center" & gt; & Lt; Div class = "hidden-xs hidden-sm" & gt; & Lt; / Div & gt; & Lt; A href = "#" & gt; & Lt; Img src = "logo_png.png" class = "img-responsive" & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / Div & gt; & Lt; Div class = "col-lg-9 col-md-9 col-sm-12" "& gt; & lt; div class =" row "& gt; & lt; div class =" col-lg-11 col- Md-11 call-sm-12 "> gt; button type =" button "class =" navbar-toggle pull-left hidden-md hidden-LG "data-toggle =" collapse "data-target =". Navbar-ex1-toggle navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; Fall "& gt; & lt; span class =" sr-only "; & lt; / span & gt; span class =" icon-bar "& gt; & lt; / span & gt; & lt; / button & Gt; div class = "fall navbar-fall navbar-ex1-collapse" & gt; & lt; ul class = "nav navbar-nav navbar-left navr" gt; ; - / By default, breakpoints @ screen-sm-min
(i.e. ≥768px) by default
Navbar Breakpoint Customize
To customize the Nauta breakpoint, the lower variable @grid-float-breakpoint
.
to:
< H2> Overflow content Since Bootstrap does not know how much content is in your navbar, you can run into problems with wrapping the contents in the second row, to solve it, you can do the following :
...
c. Customize your navbar short and horizontal mode @ grid-float-breakpoint variable on your point or add your own media query.
You can use to create a modified version of Bootstrap. From, you can use Bootstrap (i.e., xs
, sm
, md
, md
, md @ grid-float-breakpoint
/ code>, LG
) on another breakpoint defined by or a set amount (i.e. 500px
).
When you're finished, go to the section, and
edit
Your markup works as expected. , Also:
Comments
Post a Comment