Question

我的列有一点文字，然后在右边（任何大小），一个小图像。

在手机屏幕上，我想将小图片拉到顶部。我尝试了下面的bootstrap类的不同变体，我似乎无法拉/推，因此移动设备出现在移动设备上面的文字模糊的顶部

<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class = "col-xs-12 col-xs-push-12 col-sm-9 col-sm-pull-9 text-right main-block">
                <div class = "col-xs-11 pull-right h1 quote">
                    Hey, look at this text!! 
                </div>
                <div class="col-xs-12 text-right attribute h2">-SOME MORE TEXT</div>
                <div class="col-xs-12 text-right attribute">TXT</div>
            </div>
            <div class="col-xs-12 col-xs-pull-12 col-sm-3 col-sm-push-3">
                <img class ="top-right-round parallel-corner" src="http://placehold.it/350x350">
            </div>
        </div>
    </div>
</div>

Answer 1

首先考虑手机！将图像移到文本上方。然后在较大的屏幕上，拉/推柱对齐。

<div class="row">
    <div class="col-xs-12 col-sm-3 col-sm-push-9">
        <img class="img-responsive" src="http://placehold.it/350x350" />
    </div>
    <div class="col-xs-12 col-sm-9 col-sm-pull-3">
        <div class="col-xs-12">Hey, look at this text!!</div>
        <div class="col-xs-12">SOME MORE TEXT</div>
        <div class="col-xs-12">TXT</div>
    </div>
</div>

如何使用bootstrap将图像拉到顶部以获得小尺寸？

1 个答案: