html - 如何在 Bootstrap 3 的网格内对齐(上、下、右、左)内容

Question

我有一行包含两个相等的列 (.col-md-6)。第一列有一个图像。第二个有一点文字。

我想像这样对齐第二个:bottom:0;右:0。为此，我必须在第二列上执行 position: absolute; 并在行上执行 position: relative。但是，它可以工作，但是当窗口变为 sm-small 尺寸时，它无法正确流动。它只会挤在一起而不是形成两行 - 没有响应。

这是我的代码:

<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
000000000
                000000
                0000000

我想要这个，而且是响应式的，所以当窗口缩小时，文本会单独成行。

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

});

这非常有效。