Jak Mogę uzyskać kolumnę Bootstrap obejmującą wiele wierszy?
Próbuję dowiedzieć się, jak zrobić poniższą siatkę z Bootstrap.
Nie jestem pewien, jak utworzyć pole (Numer 1), które obejmuje dwa wiersze. Pola są generowane programowo w kolejności ich ułożenia. Ramka 1 to wiadomość powitalna.
Jakieś pomysły na najlepszy sposób na to?
4 answers
Dla Bootstrap 3:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="well">1
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="well">2</div>
</div>
<div class="col-md-6">
<div class="well">3</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">4</div>
</div>
<div class="col-md-6">
<div class="well">5</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">6</div>
</div>
<div class="col-md-4">
<div class="well">7</div>
</div>
<div class="col-md-4">
<div class="well">8</div>
</div>
</div>
Dla Bootstrap 2:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row-fluid">
<div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
<div class="span6"><div class="well">5</div></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="well">6</div>
</div>
<div class="span4">
<div class="well">7</div>
</div>
<div class="span4">
<div class="well">8</div>
</div>
</div>
Zobacz demo na JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-08 14:14:35
Jak sugerują komentarze, rozwiązaniem jest użycie zagnieżdżonych przęseł / wierszy.
<div class="container">
<div class="row">
<div class="span4">1</div>
<div class="span8">
<div class="row">
<div class="span4">2</div>
<div class="span4">3</div>
</div>
<div class="row">
<div class="span4">4</div>
<div class="span4">5</div>
</div>
</div>
</div>
<div class="row">
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-06 00:59:56
Poniższy przykład wydawał się działać. Wystarczy ustawić wysokość na pierwszym elemencie
<ul class="row">
<li class="span4" style="height: 100px"><h1>1</h1></li>
<li class="span4"><h1>2</h1></li>
<li class="span4"><h1>3</h1></li>
<li class="span4"><h1>4</h1></li>
<li class="span4"><h1>5</h1></li>
<li class="span4"><h1>6</h1></li>
<li class="span4"><h1>7</h1></li>
<li class="span4"><h1>8</h1></li>
</ul>
Nie mogę przestać myśleć, że to niewłaściwe użycie wiersza.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-06 00:56:45
Uważam, że część dotycząca rozmieszczenia wierszy została dokładnie wyjaśniona (np. przez zagnieżdżanie wierszy), ale napotkałem również problem z moimi zagnieżdżonymi wierszami nie wypełniającymi ich kontenera. Podczas gdy flexbox i marginesy ujemne są opcją, znacznie łatwiejszym rozwiązaniem jest użycie predefiniowanej klasy "h-50" w wierszach zawierających pola 2, 3, 4 i 5.
*Uwaga
Używam
Bootstrap-4
, chciałem się podzielić, bo wpadłem na ten sam problem i okazało się, że jest to bardziej elegancki rozwiązanie:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-13 14:35:07