Bootstrap łączący wiersze (rozpiętość wierszy)

128

I 'm testowania Twitter Bootstrap i utknęła z podstawowym rusztowaniem z wierszy. Wielokrotnie wracałem do ich dokumentacji i widzę zagnieżdżone kolumny, w których można w zasadzie zagnieżdżać kolumny w kolumnie, ale nie mogę znaleźć możliwości łączenia wierszy w jeden i wyrównania go z kolumną obok niepołączonych wierszy.

Poniższe zdjęcie powinno ilustrować to, co chcę osiągnąć.

Przykład układu rowspan

Jedynym rozwiązaniem obejścia problemu, z jakim się spotkałem, jest użycie tabel, ale nie podoba mi się ten pomysł, ponieważ moim zdaniem responsywność nie działałaby przy użyciu tabel.

Czy ktoś ma na to jakieś eleganckie rozwiązanie? Większość układu strony internetowej, którą wykonuję, będzie wymagała wysokiego poziomu elastyczności, więc byłoby wspaniale, gdybym mógł wybrać tutaj coś przydatnego.

Seong Lee
źródło

Odpowiedzi:

99

Elementy DIV są domyślnie ułożone pionowo, więc nie ma potrzeby specjalnej obsługi „wierszy” w kolumnie.

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Oto skrzypce .

Paul Keister
źródło
2
Dziękuję bardzo. Właśnie tego szukałem! Chciałbym, aby dokumentacja Bootstrap wspomniała o tym dodatkowo w kolumnach zagnieżdżania, ponieważ podejście jest w zasadzie takie samo.
Seong Lee
1
w swojej przykład zdefiniować 1row=25px, 2row=50px. czy możesz sprawić, by łączony element div był tak wysoki, jak cały wiersz? próbował dodać, .row{height:100%;}ale nie udało się.
Tomer W
Tak, @carter oryginalny przykład nie był zgodny z bootstrapem 3; Poprawiłem to.
Paul Keister,
1
Przykład ma rynny w drugim rzędzie, co wygląda dziwnie.
Connie DeCinko
84

Powinieneś użyć zagnieżdżania kolumn bootstrap.

Zobacz Bootstrap 3 lub Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(Na ekranie Fiddle powiększ ekran testu, aby zobaczyć wynik, ponieważ używam col- md - *, a następnie responsywne kolumny stosów)

Uwaga : Nie jestem pewien, czy BS2 zezwala na zagnieżdżanie kolumn , ale w odpowiedzi Paula Keistera zagnieżdżanie kolumn nie jest używane. Powinieneś go używać i unikać ponownego projektowania css, podczas gdy bootstrap działa dobrze.

Wysokość kolumn jest automatyczna, jeśli dodasz drugą linię (tak jak w moim przykładzie), wysokość kolumny dostosuje się.

Alcalyn
źródło
10
To powinna być akceptowana odpowiedź, ponieważ działa z Bootstrapem po wyjęciu z pudełka i nie wymaga żadnych
poprawek
Przyjęta odpowiedź jest bardziej czytelna; zawiera fragment kodu i odsyłacz do JSfiddle i IMHO. Przykłady Paula Keistera są wyraźniejsze niż przykłady Alcalyn. Dlatego uważam, że odpowiedź Paula Keistera powinna zostać uznana za akceptowaną, przynajmniej do czasu poprawy odpowiedzi Alcalyn.
naXa
1
@Alcalyn w mojej przeglądarce (Chrome) Skrzypce, do których odsyłasz z Twojej odpowiedzi, nie dają oczekiwanego rezultatu (patrz zdjęcie w pytaniu). Rzeczywisty wynik to wszystkie elementy div wyrównane w kolumnie.
naXa
1
Jeśli widzisz pojedynczą kolumnę ze wszystkimi wyrównanymi zakresami, dzieje się tak, ponieważ -md-reguła responsywna. Aby zobaczyć oczekiwany rezultat, musisz powiększyć ekran. Jeśli chcesz, aby rozpiętości były wyświetlane jako kolumny na mniejszych ekranach, zamień -md-na -sm-lub -xs-. To jest pytanie dotyczące punktu przerwania (patrz bootstrapdocs.com/v3.0.3/docs/css/#grid ).
Alcalyn
12

Uwaga: dotyczyło Bootstrap 2 (istotne, gdy zadano pytanie).

Możesz to osiągnąć, używając row-fluiddo utworzenia wiersza opartego na płynie (procentach) wewnątrz istniejącego block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Oto przykład JSFiddle .

Zauważyłem, że wystąpił dziwny lewy margines, który pojawia się (lub nie pojawia się) dla przęseł wewnątrz row-fluidpierwszego. Można to naprawić za pomocą niewielkiej poprawki CSS (jest to ten sam CSS, który jest stosowany do pierwszego dziecka, rozszerzony na te za pierwszym dzieckiem):

.row-fluid [class*="span"] {
    margin-left: 0;
}
pickypg
źródło
Dziękuję za twój wysiłek, ale wygląda na to, że wiersz nie musi używać row-fluid, aby to osiągnąć, jak sugeruje moja wybrana odpowiedź. Naprawdę to doceniam!
Seong Lee
1
To prawda, ale nie zapominaj, row-fluidkiedy nadejdzie czas, aby zacząć dzielić wewnętrzne rzędy.
pickypg
7

Sprawdź ten. mam nadzieję, że to pomoże ci w pełni.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}
Manish Sharma
źródło
1

Wydaje się, że odpowiedź Paula podważa cel bootstrapu; to reagowanie na rozmiar obszaru roboczego / ekranu.

Zagnieżdżając wiersze i kolumny, możesz osiągnąć ten sam wynik, zachowując jednocześnie responsywność.

Oto aktualna odpowiedź na ten problem;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Możesz wyświetlić kodepen tutaj.

vasavest
źródło
0

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

SUDIP SINGH
źródło
To nie działa dla mnie z <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- kolor: żółty; "> <input type =" file "id =" imgInp "name =" img "accept =". png, .jpg, .jpeg "> <! - <input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </input> -> <img id =" img-upload "src =" "alt =" Transporter "width =" 300% " height = "50%" class = "rounded-circle" /> </div> </div> </div>
SUDIP SINGH
2
Dodaj wyjaśnienie do swojego kodu. Aby OP i przyszły czytelnik mogli łatwo zrozumieć twoją odpowiedź.
Sangam Belose