×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

Ako zobraziť button v list-group (Bootstrap)

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.
Bootstrap,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.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších