ฉันจะจัดตำแหน่งองค์ประกอบกริดด้านล่างในเค้าโครงของไหล bootstrap ได้อย่างไร

ฉันมีเลย์เอาต์ที่ลื่นไหลโดยใช้ bootstrap ของ Twitter ซึ่งฉันมีแถวที่มีสองคอลัมน์ คอลัมน์แรกมีเนื้อหาจำนวนมากซึ่งฉันต้องการเติมเต็มช่วงปกติ คอลัมน์ที่สองมีปุ่มและข้อความบางส่วนซึ่งฉันต้องการจัดแนวด้านล่างให้สัมพันธ์กับเซลล์ในคอลัมน์แรก

นี่คือสิ่งที่ฉันมี:

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

นี่คือสิ่งที่ฉันต้องการ:

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

ฉันเคยเห็นคำตอบที่ทำให้ช่วงแรกมีความสูงสัมบูรณ์และวางตำแหน่งของช่วงที่สองเทียบกับมัน แต่วิธีแก้ปัญหาที่ฉันไม่ต้องระบุความสูงสัมบูรณ์ของ div ของฉันจะเป็นที่ต้องการ ฉันยังเปิดกว้างสำหรับการคิดใหม่ทั้งหมดเกี่ยวกับวิธีการบรรลุผลเช่นเดียวกัน ฉันไม่ได้แต่งงานกับการใช้นั่งร้านนี้ดูเหมือนว่าจะเข้าท่าที่สุดสำหรับฉัน

เค้าโครงนี้เป็นซอ:

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

โปรดทราบ: สำหรับผู้ใช้ Bootstrap 4+ โปรดพิจารณาโซลูชันของ Christophe (Bootstrap 4 แนะนำ flexbox ซึ่งเป็นโซลูชัน CSS ที่สวยงามกว่าเท่านั้น) สิ่งต่อไปนี้จะใช้ได้กับ Bootstrap เวอร์ชันก่อนหน้า ...

โปรดดูhttp://jsfiddle.net/jhfrench/bAHfj/สำหรับวิธีแก้ปัญหา

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

ด้านบวก:

• ในจิตวิญญาณของเงินทุนเรียนผู้ช่วยที่มีอยู่pull-downผมชื่อชั้นเรียน
• เฉพาะองค์ประกอบที่ถูก "ดึงลง" เท่านั้นที่จะต้องได้รับการจัดประเภทดังนั้น ...
• ... สามารถใช้ซ้ำได้สำหรับองค์ประกอบประเภทต่างๆ (div, span, section, p ฯลฯ )
• ได้รับการสนับสนุนค่อนข้างดี (เบราว์เซอร์หลักทั้งหมดรองรับ margin-top)

ตอนนี้ข่าวร้าย:

• ต้องใช้ jQuery
• ไม่ใช่เป็นลายลักษณ์อักษรตอบสนอง (ขออภัย)

นี่เป็นโซลูชันที่อัปเดตสำหรับ Bootstrap 3 (ควรใช้ได้กับเวอร์ชันเก่ากว่า) ที่ใช้ CSS / LESS เท่านั้น:

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

คุณตั้งค่าขนาดตัวอักษรเป็น 0 ในแถว (มิฉะนั้นคุณจะมีช่องว่างที่น่ารำคาญระหว่างคอลัมน์) จากนั้นลบคอลัมน์ลอยตั้งค่าการแสดงผลinline-blockตั้งค่าขนาดแบบอักษรใหม่จากนั้นvertical-alignสามารถตั้งค่าเป็น สิ่งที่คุณต้องการ

ไม่จำเป็นต้องใช้ jQuery

คุณสามารถใช้ flex:

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

คุณต้องเพิ่มสไตล์สำหรับspan6smthg เช่นนั้น:

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

และนี่คือซอของคุณ: http://jsfiddle.net/sgB3T/

นี่คือคำสั่ง angularjs เพื่อใช้ฟังก์ชันนี้

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

เพียงแค่ตั้งผู้ปกครองไปและเด็กdisplay:flex; margin-top:autoสิ่งนี้จะวางเนื้อหาย่อยไว้ที่ด้านล่างขององค์ประกอบหลักโดยสมมติว่าองค์ประกอบหลักมีความสูงมากกว่าองค์ประกอบลูก

ไม่จำเป็นต้องลองคำนวณค่าmargin-topเมื่อคุณมีความสูงในองค์ประกอบหลักหรือองค์ประกอบอื่นที่มากกว่าองค์ประกอบที่ลูกสนใจภายในองค์ประกอบหลักของคุณ

จากคำตอบอื่น ๆ ที่นี่เป็นเวอร์ชันที่ตอบสนองได้ดียิ่งขึ้น ฉันทำการเปลี่ยนแปลงจากเวอร์ชันของ Ivan เพื่อรองรับวิวพอร์ตที่กว้าง <768px และเพื่อให้รองรับการปรับขนาดหน้าต่างช้าได้ดีขึ้น

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

สิ่งนี้ขึ้นอยู่กับโซลูชันของ cfx แต่แทนที่จะตั้งค่าขนาดตัวอักษรเป็นศูนย์ในคอนเทนเนอร์หลักเพื่อลบช่องว่างระหว่างคอลัมน์ที่เพิ่มเข้ามาเนื่องจากการแสดงผล: อินไลน์บล็อกและต้องรีเซ็ตใหม่ฉันก็เพิ่ม

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

ไปยังคอลัมน์ divs เพื่อชดเชย

ดีฉันไม่ชอบใด ๆ <div>&nbsp;</div>ของคำตอบเหล่านั้นวิธีการแก้ปัญหาของฉันปัญหาเดียวกันคือการเพิ่มนี้: ดังนั้นในรูปแบบของคุณมันจะมีลักษณะเช่นนี้ (ไม่มากก็น้อย) ในกรณีของฉันไม่จำเป็นต้องเปลี่ยนสไตล์:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

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