bootstrap twitter-colonne multi-dropdown
j'essaie de créer une liste déroulante twitter bootstrap qui a quelque part entre 7-36 éléments de menu. Malheureusement, avec beaucoup d'articles, je ne peux voir que les 15 premiers. J'aimerais pouvoir diviser le nombre d'articles de sorte qu'il n'y ait pas plus de 10 par colonne, avant qu'une nouvelle colonne ne soit créée.
Je ne suis pas en train d'essayer de faire des dropdowns emboîtés, j'essaie juste de changer la présentation de la dropdown pour qu'il n'y ait pas plus de 10 articles par colonne, cependant tous les articles doit toujours être affiché. J'ai essayé de mettre tous les 10!--0-- > s dans leur propre div mais ce N'est même pas compatible HTML je pense. Est-il possible de le faire par L'entremise du SCT?
6 réponses
vous pouvez utiliser Bootstrap .row-fluid pour réaliser ce dont vous avez besoin.
j'ai intimé le css pour la largeur du menu déroulant mais vous pouvez spécifier une classe/id et l'inclure dans votre feuille de style.
fondamentalement, ce qui se passe ici est:
- création d'une grille fluide à l'intérieur de la liste déroulante
- paramétrage d'une largeur fixe pour le conteneur lui-même
liles tags héritent de leur style du parent liste déroulante
l'exemple ci-dessous n'a été testé que dans Chrome v23
* Bootstrap 2.x:
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="row-fluid" style="width: 400px;">
<ul class="unstyled span4">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="unstyled span4">
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="unstyled span4">
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
[EDIT]
* Bootstrap 3.x:
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-4">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
Je l'ai résolu en ajoutant la classe "colonnes" où j'ai mis les colonnes compter et baisser la largeur. Bien sûr, vous pouvez définir le nombre de colonnes et la largeur en fonction des requêtes des médias.
https://jsfiddle.net/maciej_p/eatv1b4b/18/
HTML:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">wybierz region<b class="caret"></b></a>
<ul class="dropdown-menu columns">
<li><a href="#"><strong>Górny Śląsk</strong></a></li>
<li><a href="#">powiat będziński</a></li>
<li><a href="#">powiat bielski</a></li>
<li><a href="#">powiat bieruńsko-lędziński</a></li>
<li><a href="#">powiat cieszyński</a></li>
<li><a href="#">powiat częstochowski</a></li>
<li><a href="#">powiat gliwicki</a></li>
<li><a href="#">powiat kłobucki</a></li>
<li><a href="#">powiat lubliniecki</a></li>
<li><a href="#">powiat mikołowski</a></li>
<li><a href="#">powiat myszkowski</a></li>
</ul>
</li>
CSS:
@media screen and (max-width: 991px){
.columns{
height: 200px;
overflow-y:scroll;
}
}
@media screen and (min-width: 992px){
.columns{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
width: 500px;
height:170px;
}
}
j'ai ajusté le code en fonction de Bootstrap 3. Pour un 3-colonne déroulante:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 </a>
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 1 - Opt 1</a></li>
<li><a href="#">Col 1 - Opt 2</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
<div class="col-md-4">
<ul class="dropdown-menu">
<li><a href="#">Col 2 - Opt 1</a></li>
<li><a href="#">Col 2 - Opt 2</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
j'ai dû ajouter la Min-Largeur, sinon la 3e colonne a débordé la marge droite:
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
voir Également Mega Menu offres.
(il aide si vous le dites," Mega Menu " dans une voix idiote)
une Fois décent offre est YAMM ou YAMM3 (selon la version de Bootstrap vous utilisez).
j'ai un billet récent montrant comment réaliser ceci pour 2 colonnes qui devraient être facilement modifiées pour s'adapter à vos besoins en changeant la largeur de la descente multi-colonnes et en changeant le nombre de portées dans votre rangée de fluides.
Check it out: http://www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html
FYI - cela maintient les styles compatibles avec les autres menus déroulants bootstrap
Regarder plus de ce plugin, il sera utile pour vous.
http://alijafarian.com/bootstrap-multi-column-dropdown-menu/