Question

我有一个页面，我在小屏幕上的位置（即：手机）我希望图像在文本上方，而在较大的屏幕上我希望图像在文本的右侧。

我正在使用偏移将图像拉到更大的屏幕上。但是，它在大屏幕上没有正确对齐（较小的屏幕正如我所料）。左侧的文字直到右侧图像后才开始。我之前没有使用过bootstrap的偏移功能，我不太清楚我做错了什么......

Here is a screenshot（不需要的间隙标有黄色）

代码......

<div class="row">

    <div class="col-md-4 col-xs-12 col-md-offset-8">
       <img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt="">   
    </div>

    <div class="col-md-8 col-xs-12">
        <?php echo nl2br($p['desc_landing']); ?>    
    </div>

</div>

任何帮助表示赞赏！

Answer 1

Heyho，

你正在用col-md-offset-8做的是用一个边距将图像向右推，从而用这一列填满整行。

数学：4 + 8 = 12

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12 col-sm-push-8">
  Your Picture 
</div>
<div class="col-sm-8 col-xs-12 col-sm-pull-4">
  Your text
</div>

你可以通过推拉来解决这个问题。因此，在中等屏幕上，您的文本将在左侧显示“first”，比率为8/4。然后在较小的屏幕上，它将进入正常顺序，其中图片位于顶部，文本位于下方。希望有所帮助：）

哦，出于测试原因，我把col-sm。否则你无法在预览中看到结果：）

问候

Bootstrap Overflow未正确对齐

1 个答案: