在Bootstrap 3的移动视图中，将内容堆叠在另一个下面？
在Bootstrap 3的移动视图中，可以使用CSS类"col-xs-"来实现将内容堆叠在另一个下面的效果。"col-xs-"类是Bootstrap中用于定义响应式布局的类，其中的"xs"表示extra small，即移动设备的屏幕尺寸。
具体步骤如下：
- 在HTML中，将需要堆叠的内容包裹在一个父容器中，可以使用<div>标签或其他适当的标签。
- 在父容器中，添加一个CSS类"row"，用于创建一个行。
- 在父容器中，添加两个子容器，分别用于放置上方和下方的内容。
- 给上方的子容器添加CSS类"col-xs-"，并指定所占的列数，例如"col-xs-12"表示占据整行的12列。
- 给下方的子容器添加CSS类"col-xs-"，并指定所占的列数，可以根据需要调整列数，例如"col-xs-12"表示占据整行的12列。
这样，当在移动设备上查看页面时，下方的内容会自动堆叠在上方的内容下面。
推荐的腾讯云相关产品：腾讯云移动应用托管（Mobile Application Hosting），提供了一站式的移动应用托管服务，支持移动应用的部署、管理和监控。产品介绍链接地址：https://cloud.tencent.com/product/mah
相关·内容
我使用的是bootstrap 3，我希望image-two类(以及它在else条件中的所有子内容)与移动视图中的"New Image“内容堆叠在"box”类div之下。现在它堆叠在上面，我想找到一种干净的方式堆叠在它下面，我如何才能最好地做到这一点呢？="address">
浏览 2提问于2016-08-20得票数 0
在移动优先设计中，我有3列堆叠在一起，如下所示C对于>= md视口，我希望实现以下布局C
使用Bootstrap可以很容易地做到这一点吗？我遇到了拉/推列的问题
浏览 1提问于2015-07-06得票数 0
我一直在尝试学习使用Twitter bootstrap。它在桌面上工作得很好，响应式的工作。假设我使用的是span8和span4。我不知道如何强制iPad纵向视图在span8下堆叠span4。我有正确的标签在头部部分，视口和响应CSS文件。更新：
这是我所拥有的。我可以看到当我缩小see浏览器窗口时，它是如何响应的(最终span4被移到span8下)。如果我在iPad上处于纵向模式，我不希望span8和span4<e
浏览 0提问于2013-02-24得票数 3
回答已采纳
我正在使用bootstrap 4。下面是我的html<div class="container"> <div class="col-lg-6">A</div然而，在移动设备上，或者当我将浏览器调整到非常窄的时候，两个类col 6堆叠在一起，它们之
浏览 1提问于2020-06-14得票数 0
1回答
引导3选项菜单消失。
、、、、
我有一个由4列组成的表，使用Bootstrap 3网格系统。我使用的不是col-xs-*，它在移动环境中工作得很好，而是使用了col-md-*。当我为这些列从col-xs-*切换到col-md-*时，移动将自动将图标堆叠在网格中，并保持它们的大小--这正是我想要的。好吧，一切都很好，除了，这使得文档宽度变得混乱了，选项菜单(用于移动设备/平板电脑的三条弹出菜单)消失了，因
浏览 3提问于2016-09-07得票数 0
回答已采纳
1回答
我想在中实现一种称为滚动div的技术。我想做的是以下几点。如果用户在我的页面上，他只能看到视图(图片中的绿色框)。此视图中的所有DOM元素在页面加载时对用户都是可见的。在页面加载(图像中的蓝色框)上加载页面后，未加载视图中的Alle DOM元素。
如果用户拖动并移动视口，则所有dom元素都会显示在视图端口上。如
浏览 3提问于2013-10-14得票数 9
回答已采纳
1回答
首先，客户端需要对核心引导文件进行编辑，所以所有定制的css都必须放在单独的文件中。
我所给出的设计有一堆盒子，当在桌面视图中的时候，它们被放置在一个网格3中，一排一排。这样做很好，但是移动视图中有两个相同的盒子排列在一起，但它们总是堆叠在一起。我已经在容器内尝试了col 6，它在992 it和762 it之间工作，但是在这个容器下面，盒子堆栈。
浏览 2提问于2014-03-07得票数 1
回答已采纳
1回答
我在我的rails项目中使用了Masonry和Bootstrap。下面是我正在使用的JS：$(function() { return} });});posts.html.erb
浏览 4提问于2017-04-17得票数 0
14回答
打印用自举栅格
、、
我想设计一个报告页，有一个不同的布局打印到移动。我正在使用引导v3。似乎网格无法区分两者，因为打印的断点与移动(xs)的断点相同。例如:在下面的测试html中，我的打印页面(或打印预览版)并排显示xs6列，但sm6列堆叠在一起。在xs和sm之间没有断点。
当然，我的打印页面比我的移动视图更宽，所以它不应该使用sm布局吗？是否有已定义的打印
浏览 9提问于2014-03-05得票数 52
回答已采纳
正在尝试更新我的工作页面，因为它看起来很过时。我使用的是Bootstrap 3和一个模板"Ruma“。我已经用我想要的内容替换了大部分东西(还需要调整一些颜色)。当我在移动设备或Responsinator上查看网站时，导航栏会覆盖幻灯片。我需要做什么才能将内容向下推，这样导航栏才不会覆盖在移动设备上的幻灯片上？另外，有没有可能使用javascript将<
浏览 0提问于2014-07-22得票数 0
当我试图在设计器视图中将一个PictureBox控件堆叠在另一个控件之上时，我遇到了一个奇怪的问题。对于第一个PictureBox，我有一个图像以及第二个图像，但当我将第二个图像堆叠在第一个图像之上时，它们似乎交换了位置，就好像下面的图像向前移动一样。
有什么方法可以防止这种情况发生吗？
浏览 2提问于2012-05-07得票数 0
回答已采纳
0回答
我有以下代码：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssbtn btn-info btn-fill search-button" type="button">Search</button> <&
浏览 9提问于2017-01-02得票数 2
2回答
使用Bootstrap 3，我正在为DIV的垂直对齐而苦苦挣扎。我对所有不同的css显示类型都很迷惑。这是一个遗留代码。你可以在CODEPEN中找到它：
现在，我想添加另一个DIV，其内容将显示在图像的底部(视口的底部)。我试着添加了一些CSS<em
浏览 6提问于2015-04-20得票数 0
1回答
我正在使用Bootstrap 3的工具提示功能。位置：“自动”
$(".tour-badges li img, .difficulty-rating li").tooltip({ container:'body', placement: 'auto' });
这将防止工具提示出现在视区之外。因此，如果用户在移动平台上查看站点，然后滚动使工具提示
浏览 2提问于2015-11-19得票数 0
这是一个简单的壮举清除列在瘦小的视口，但我需要技术来移动东西。我正在尝试协调两个截然不同的移动和桌面模拟。桌面模拟包含一个3列网格，它应该在移动视图中折叠成一个单列网格，然后隐藏一些元素并重排其他元素。
隐藏元素对于display: none来说是微不足道的。对我来说，最困难的部分是将元素从列中分离出来，并将它们到处移动，就像一样。通过Fireb
浏览 0提问于2012-05-02得票数 4
我正在试着让三张牌在Bootstrap中以某种方式运行。 所有三张卡水平堆叠在笔记本电脑视图和更高(col lg-4)。这可以很好地工作。在iPad视图中，前两张牌水平堆叠在一起，而最后一张牌在它们下面垂直堆叠(前两张牌使用col md-6，最后一张牌使用col md-12)。这也可以很好地工作。我尝试将默认的col类添加到前两个类中，但它们不能很好地工作。 ，我希望所有的卡片垂直堆叠在一起，当我
浏览 13提问于2019-05-27得票数 1
回答已采纳
3回答
页脚不粘在底部
、、
我想要一个页脚，即使正文中的内容不能填满浏览器视口，它也会留在botoom中。当内容的高度足以填充视口时，我不希望它重叠在主体内容上。在网上搜索时，我大多发现一个“粘性”页脚，它与内容重叠，即使内容足以填满视区。到目前为止，这就是我正在尝试的(我也在使用bootstrap3)
HTML (在<body&g
浏览 1提问于2014-03-28得票数 0
我发现了一个问题，文本只有在将HTML元素滚动出视区或切换到另一个选项卡后才会显示。同样的问题也发生在WKWebView中。有没有办法防止这个问题的发生？这些部分可以水平滚动。不确定这是否相关，但我发现非常奇怪的是，Safari不渲染视口中的文本。 在附图中，您可以看到在EU、UK和US下面有空行。 任何建议都是值得欣赏的。 -- 添加了
浏览 26提问于2021-07-03得票数 0
现在，我的ContentView (就像一个弹出窗口)堆在我的网格上，参见下面的代码： <ContentView>...</> </StackLayout>网格是一个表单，所以当我按下表单中的一个按钮时，我想要一个新<e
浏览 5提问于2022-11-11得票数 0
1回答
我使用CSS3转换来移动我的网站的内容来显示菜单。菜单在左边。这就是内容可以部分隐藏的方向。有办法阻止这件事吗？强制它只显示在视图中。
浏览 2提问于2014-04-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
