V tomto krátkom článku predstavím, ako dizajnovo správne zakomponovať <button> do list-group. Štandardne je tlačidlo odsadené od okrajov položky čo je často nežiadúci stav. Odstránenie tohto stavu je možné vykonať nasledujúcim spôsobom.Príklad: Bežný zápis list-group s tlačidlom.
1
2
3
4
5
6
7
8
9
10
<ul class="list-group">
<li class="list-group-item active">List group item 1</li>
<li class="list-group-item">List group item 2</li>
<li class="list-group-item">List group item 3</li>
<li class="list-group-item">
<button type="button"class="list-group-item">
Button list group item
</button>
</li>
</ul>
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
li.button {
padding: 0;
}
li.button button {
border: 0;
}
Príklad: Upravený zápis list-group s tlačidlom.
1
2
3
4
5
6
7
8
9
10
<ul class="list-group">
<li class="list-group-item active">List group item 1</li>
<li class="list-group-item">List group item 2</li>
<li class="list-group-item">List group item 3</li>
<li class="button list-group-item">
<button type="button"class="list-group-item">
Button list group item
</button>
</li>
</ul>
Záver
Ak používate iný spôsob ako dizajnovo správne zakomponovať <button> do list-group, podeľte sa oň prostredníctvom komentára.22.4.2017, Matej LednárKategória: BootstrapBootstrap,list-group,list-group-item,<button>,<ul>,<li>Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.Viac informácií nájdete v sekcii O projekte.
