Bagaimana cara meratakan bawah elemen grid dalam tata letak fluida bootstrap

123

Saya memiliki tata letak yang lancar menggunakan bootstrap Twitter, di mana saya memiliki baris dengan dua kolom. Kolom pertama memiliki banyak konten, yang ingin saya isi rentangnya secara normal. Kolom kedua hanya memiliki tombol dan beberapa teks, yang ingin saya ratakan ke bawah relatif ke sel di kolom pertama.

Inilah yang saya miliki:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

Inilah yang saya inginkan:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

Saya telah melihat solusi yang membuat rentang pertama menjadi tinggi absolut, dan memposisikan rentang kedua relatif terhadapnya, tetapi solusi di mana saya tidak perlu menentukan ketinggian absolut div saya akan lebih disukai. Saya juga terbuka untuk memikirkan ulang sepenuhnya tentang cara mencapai efek yang sama. Saya belum menikah dengan penggunaan perancah ini, sepertinya hal itu paling masuk akal bagi saya.

Tata letak ini sebagai biola:

http://jsfiddle.net/ryansturmer/A7buv/3/

Ryan
sumber
tidak bisakah Anda menambahkan margin-top sekitar 200px ke .rightspan Anda?
Richlewis
Pintasan ke CSS hanya menjawab pertanyaan ini: stackoverflow.com/a/14223553/259725
Adam
bootply.com/125740# (Maaf, saya lupa dari jawaban pertanyaan SO mana tautan ini berasal.)
ToolmakerSteve

Jawaban:

50

Harap diperhatikan: untuk pengguna Bootstrap 4+, harap pertimbangkan solusi Christophe (Bootstrap 4 memperkenalkan flexbox, yang menyediakan solusi khusus CSS yang lebih elegan). Berikut ini akan bekerja untuk versi Bootstrap sebelumnya ...


Lihat http://jsfiddle.net/jhfrench/bAHfj/ untuk solusi yang berhasil.

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

Sisi positifnya:

  • dalam semangat kelas pembantu Bootstrap yang ada , saya menamai kelas tersebut pull-down.
  • hanya elemen yang "ditarik ke bawah" yang perlu digolongkan, jadi ...
  • ... dapat digunakan kembali untuk berbagai jenis elemen (div, span, section, p, dll)
  • didukung dengan cukup baik (semua browser utama mendukung margin-top)

Sekarang kabar buruknya:

  • itu membutuhkan jQuery
  • itu tidak, seperti yang tertulis, responsif (maaf)
Jeromy French
sumber
3
untuk responsivitas, mungkin kaitkan window.resize? stackoverflow.com/a/2969091/244811
Scott Weaver
22
Jangan gunakan solusi jQuery untuk sesuatu yang bisa menjadi solusi CSS. Ada banyak alasan untuk menghindari manipulasi DOM untuk tujuan gaya.
Archonic
1
@Archonic: apa itu solusi khusus CSS? Saya juga lebih memilihnya daripada solusi yang bergantung pada JS. Ingatlah ketentuan OP: "solusi di mana saya tidak perlu menentukan tinggi absolut
div
1
@cfx Memposting solusi khusus css dengan biola yang tidak memerlukan ketinggian absolut.
Archonic
1
Di sisi lain, solusi saya memungkinkan pengguna untuk menyelaraskan elemen individu ke bawah (memberikan perilaku yang mirip dengan Bootstrap .pull-leftdan .pull-right), tanpa mempengaruhi saudara kandung. Bisakah itu dilakukan dengan solusi khusus CSS?
Jeromy French
68

Ini adalah solusi yang diperbarui untuk Bootstrap 3 (seharusnya berfungsi untuk versi yang lebih lama) yang hanya menggunakan CSS / KURANG:

http://jsfiddle.net/silb3r/0srp42pb/11/

Anda mengatur ukuran font menjadi 0 pada baris (jika tidak, Anda akan berakhir dengan spasi yang mengganggu di antara kolom), lalu hapus float kolom, atur tampilan ke inline-block, atur ulang ukuran fontnya, dan kemudian vertical-aligndapat diatur ke apapun yang Anda butuhkan.

Tidak perlu jQuery.

cfx
sumber
Saya ingin tetap di tengah. Namun di jsfiddle Anda ketika saya mencoba "vertical-allign: middle" maka tidak berhasil. Ada pemikiran?
sukacita
Coba atur keduanya divke vertical-align: middle;.
cfx
6
Ini adalah satu-satunya jawaban yang dapat diterima! @ Lukas akan mengabaikan lebar pada kolom yang tidak mengisi baris. Dan manipulasi DOM untuk gaya ... SMH.
Archonic
CSS Anda dikunci dari baris (secara khusus, .myrow) ... bukankah ini berarti Anda tidak dapat memiliki satu kolom diratakan atas, satu kolom diratakan di bawah, dan kolom ketiga diratakan?
Jeromy French
Terima kasih! Bekerja dengan baik dengan Bootstrap 4.
Elie Teyssedou
33

Anda dapat menggunakan flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}
Christophe
sumber
Menggunakan felx sangat bagus dan mudah menurut saya dan saya memiliki satu keuntungan lagi menggunakan "align-items: baseline" yang hebat dengan font yang berbeda di item yang berbeda untuk disejajarkan.
Alessandro Dentella
Saran yang bagus untuk menggunakan flex. Sederhana, tegas, dan menggunakan Bootstrap untuk menyelesaikan masalah Bootstrap.
CheddarMonkey
1
Jawaban brilian dan bekerja sempurna dengan bootstrap tanpa memerlukan javascript / jquery.
Kotoran
1
Yup, tambahkan ini ke baris bootstrap biasa dan bam, ini berfungsi. Cantik. Bagaimana solusi jquery yang tidak responsif menjadi jawaban teratas? Kami tidak akan pernah tahu.
Levi Fuller
@LeviFuller Dugaan saya karena solusi ini hanya mendukung satu breakpoint
clamchoda
27

Anda perlu menambahkan beberapa gaya untuk span6, smthg seperti itu:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

dan ini biola Anda: http://jsfiddle.net/sgB3T/

Lukas
sumber
4
Saya akan membuat kelas css tertentu daripada mengaturnya ke span6, tetapi strategi sel tabel bekerja dengan baik! Saya juga harus mengatur "display: table-row" ke div berisi untuk memiliki lebar yang benar.
Meta-Knight
3
Untuk Bootstrap 3 saya menambahkan aturan ini: .row.align-bottom> [class ^ = col] {display: table-cell; perataan vertikal: bawah; float: tidak ada; } terapkan align-bottom ke baris & lt; div class = "row align-bottom" & gt;
Martin
@Martin, aturan Anda berfungsi dengan baik saat Anda juga menyetel .align-bottom {display: table-row;}, namun, perataan baris tidak aktif karena baris tabel tidak mematuhi bootstrap margin-left dan margin-right: -15px ......pikiran?
Alex White
@AlexWhite - Pasang padding-left: 0dan padding-right: 0di semua cols di baris itu.
AnalogWeapon
1
Ini akan mengabaikan lebar kolom saat kolom tidak mengisi lebar baris. Saat menggunakan offset misalnya.
Archonic
14

Berikut juga arahan angularjs untuk mengimplementasikan fungsi ini

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css('margin-top', $parentHeight - height);
        }
      };
    }
Ilya Schukin
sumber
7

Cukup atur orang tua ke display:flex;dan anak ke margin-top:auto. Ini akan menempatkan konten anak di bagian bawah elemen induk, dengan asumsi elemen induk memiliki tinggi lebih besar dari elemen anak.

Tidak perlu mencoba dan menghitung nilai margin-topketika Anda memiliki ketinggian pada elemen induk Anda atau elemen lain yang lebih besar dari elemen anak Anda dalam elemen induk Anda.

sissypants
sumber
Ini harus menjadi jawaban yang diterima: singkat, sederhana, dan berfungsi di browser apa pun yang mendukung flex. Satu-satunya kelemahan adalah merusak respon.
tbm
4

Berdasarkan jawaban lain di sini adalah versi yang lebih responsif. Saya membuat perubahan dari versi Ivan untuk mendukung viewports dengan lebar <768px dan untuk lebih mendukung pengubahan ukuran jendela yang lambat.

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);
bbodenmiller.dll
sumber
terima kasih untuk perbaikan ini, saya baru saja mengambilnya untuk proyek saat ini dan ini bekerja dengan baik.
sifriday
1
Mengapa disetel margin-topke 0, lalu menyetelnya lagi ke nilai baru? Juga, mengapa melakukan hal-hal ini dalam dua each()"putaran"?
Jeromy French
4

Ini didasarkan pada solusi cfx, tetapi daripada mengatur ukuran font menjadi nol di penampung induk untuk menghapus ruang antar-kolom yang ditambahkan karena tampilan: blok-inline dan harus mengatur ulang, saya hanya menambahkan

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

ke div kolom untuk mengimbangi.

Kirtlander
sumber
0

Yah, aku tidak seperti jawaban mereka, solusi saya dari masalah yang sama adalah untuk menambahkan ini: <div>&nbsp;</div>. Jadi dalam skema Anda akan terlihat seperti ini (lebih atau kurang), tidak ada perubahan gaya yang diperlukan dalam kasus saya:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
jan b
sumber
4
Bagaimana Anda mengetahui jumlah yang &nbsp;akan ditambahkan jika panjang sel kiri tidak diketahui?
Gqqnbig
-2
.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
Douglas Ribeiro
sumber
1
Anda harus mencoba untuk menambahkan beberapa info ke jawaban Anda menjelaskan mengapa itu menjawab pertanyaan OP
MLavoie