gpt4 book ai didi

html - Bootstrap 两列布局错位

转载 作者:行者123 更新时间:2023-11-28 12:48:02 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的两列布局,其中有一个大图像,然后是两列,左边一列用于图像,右边一列用于文本。

Misalignment

但我无法将图像列与顶部大图像对齐。我可以添加一个边距为 -15 像素的类,但 XS 屏幕尺寸会出现错位。


with -15px margin

我还可以为 xs 屏幕添加另一个 -15px 边距,然后我可能需要修复其他问题。这是一个基本的布局问题,我觉得我做错了什么。

你们能建议我做错了什么吗?我应该如何处理 Bootstrap 3 中的两列布局?

这是 Bootply Link

最佳答案

<div class="col-sm-12">在较低的盒子里引起麻烦。您在这里有两个选择:

  1. 只删除div
  2. 再添加一个 <div class="row"><div class="col-sm-12">之后

您实质上是在创建嵌套网格, Bootstrap 要求您以新的 <div class="row"> 开始每个新的嵌套级别

参见:http://www.bootply.com/sh13QtYpFP

关于html - Bootstrap 两列布局错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24657514/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com