gpt4 book ai didi

css - 在 Bootstrap 的小型设备上跳转到下一行的列

转载 作者:行者123 更新时间:2023-11-28 09:00:10 24 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 3 制作一个简单的布局,它在笔记本电脑上看起来不错,但是当我尝试在 Chrome 中模拟 Iphone 5 等小屏幕时,我的一张图片会转到下一行,不过我期待它与标题在同一行。从视觉上看,似乎有足够的空间,我尝试了拉、推、应用 offser,但仍然无法正常工作。

有人可以帮忙指出我在这里做错了什么吗?

enter image description here

<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="col-md-4 column"></div>
<div class="col-md-4 column"></div>
<div class="col-md-4 column">
<div class="row clearfix">
<div class="col-md-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 column">
<h2>Venue 2015</h2>
</div>
</div>
</div>
</div>
</body>
</html>

最佳答案

col-md-* 类仅适用于 992px 到 1200px 的屏幕尺寸 - 如果您想要在小型显示器上使用 2 列布局,请添加 col-xs-* 类。

在你的情况下:

<div class="row clearfix">
<div class="col-md-6 col-xs-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 col-xs-6 column">
<h2>Venue 2015</h2>
</div>
</div>

关于css - 在 Bootstrap 的小型设备上跳转到下一行的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26953703/

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