Bagaimana cara meratakan bawah elemen grid dalam tata letak fluida bootstrap

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/

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)

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.

Anda dapat menggunakan flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

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/

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);
        }
      };
    }

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.

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);

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.

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   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}