Modifier breakpoint bootstrap

Bonjour,

j'aimerai modifier le breakpoint bootstrap pour que mon menu, sur l'affichage tablette, soit le meme que l'affichage mobile (avec le bouton pour dérouler le menu)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="navbar-header table" style="margin:0;height:0">
					<ul style="width:80%"><a href="#" class="navbar-brand navbar-link"><img src={{logo}} style="width:29%"></a></ul>
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
				</div>
				<div class="hidden-xs hidden-sm navbar-collapse" style="border:none;margin:0;width:100%">
					<ul class="nav nav-tabs navbar-right text-center">
						{{ partial('layout_partials/sidebar-lg') }} 
						{% if username %}
							<li>
								<a href="/base/auth/logout">
								<br><b><font color='grey'>Déconnexion</font></b></span></a>
							</li>
						{% endif %}
					</ul>
				</div>
				<div class="hidden-lg hidden-md collapse" id="navcol-1" style="border:none;margin:0;width:100%">
					<ul class="nav nav-tabs navbar-right text-center">
						{{ partial('layout_partials/sidebar-sm') }} 
						{% if username %}
							<hr>
								<a href="/base/auth/logout">
								<br><b><font color='grey'>Déconnexion</font></b></span></a>
							</hr>
						{% endif %}
					</ul>
				</div>

pour le moment j'ai bien le bouton pour l'affichage xs et le menu complet pour les affichages md et lg

pour l'affichage sm (tablette) je n'ai ni le bouton ni le menu (le menu c'est normal)

j'ai trouvé ces lignes de code dans les fichiers bootstrap :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;
 
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;
 
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;
 
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;
 
// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);
 
 
//== Grid system
//
//## Define your custom responsive grid.
 
//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-md-min; //ligne a modifier pour le breakpoint (default => @screen-sm-min) que j'ai déja modifier
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

j'ai beau changer la valeur de @grid-float-breakpoint je n'ai aucun changement sur ma page.