Question

我有一行有两个相等的列（.col-md-6）。第一列有一个图像。第二个有一些文字。

我希望像这样对齐第二个：bottom:0; right:0。为了做到这一点，我必须在第二列上position: absolute;和行上的position: relative。但是，它可以正常工作，但当窗口变为sm时，它无法正常流动 - 体积小。它会挤在一起而不是形成两排 - 没有响应。

这是我的代码：

<div class="row hidden-xs">
    <div class="col-md-6">
        <img class="img-responsive" style="max-width: 440px;" src="logo.png">
    </div>
    <div class="col-md-6" style="text-align: right; padding-right: 0px; margin-right: 0px; vertical-align: baseline; bottom:0px">
        <p style="text-align: right;">a little bit of text. text. text</p>
    </div>

</div>

我甚至尝试在上面添加.col-md-offset-6。但我得到了这个布局

我想要这个，并且反应灵敏，所以当窗口收缩时，文本会自行排列。

000000000    
0       0
0       0         000000
000000000        0000000

注意对齐。

我已经尝试并研究了几个小时，但无法弄明白。感谢

Answer 1

<强>更新：

使用CSS中的@media可以实现同样的效果。

<强>原始

感谢您的努力。我知道了！我必须使用javascript，这个代码是用jQuery：

$(document).ready(function(){

    function window_size() {

        width=window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

        height=window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

        if(width<992) {
            $('.head-row').css('position', 'static');
            $('.text').css('position', 'relative');
        }
        else {
            $(".head-row").css("position", "relative");
            $(".text").css("position", "absolute");
        }


    };
    window_size();
    $(window).resize(window_size);  

});

这很有效。

如何在Bootstrap 3的网格中对齐（向上，向下，向右，向左）内容

1 个答案: