引导程序溢出未正确对齐

Question

我正在制作一个页面，在小屏幕（即：手机）上我希望图像位于文本上方，而在大屏幕上我希望图像位于文本右侧。

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

这是屏幕截图（不需要的间隙标记为黄色）

还有代码...

<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

嘿嘿，

您使用 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。否则你无法在预览中看到结果:)

问候