当前位置: 首页 > 面试题库 >

引导列垂直堆叠在移动设备上

江睿
2023-03-14
问题内容

我有一个简单的引导网格布局。我不希望这些列即使在小型设备上也垂直堆叠。

<div class="container">
<div class="row">
  <div class="col-sm-4 col-xs-4 col-md-4">1</div>
  <div class="col-sm-4 col-xs-4 col-md-4">2</div>
  <div class="col-sm-4 col-xs-4 col-md-4">3</div>
</div>

问题答案:

这些列是垂直堆叠的,因为您使用的是 Bootstrap 4 ,并且-xs-不再使用中缀。只需使用col-4..

  <div class="container border-show center-div">
    <div class="row">
      <div class="col-4 border-show">1</div>
      <div class="col-4 border-show">2</div>
      <div class="col-4 border-show">3</div>
    </div>
  </div>


 类似资料:
  • 所以基本上我面临的问题只存在于手机上,因为网站是完美的桌面上 这是我在手机上面对的截图 手机问题 桌面上没有问题 对于对齐自定义类,它包含一个具有重要和对齐项中心的flex 问题不只是在那个特定的方面,它遍布整个网站。 我尝试过的解决方案: 尝试为所有a设置0的边距 我使用的是cdn css,但用本地css替换了它 为a设置特定的线高度 填充以容纳它 这里是另一部分的另一个屏幕截图[相同的css文

  • 问题内容: 不幸的是,似乎没有一种好方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。涉及表单时似乎确实有解决方案,但这不是这里的情况。我已经尝试过此解决方案,但是当有多个列排成一行时,它不起作用。 为了说明我的情况,这是HTML的结构: 在中等设备大小(md)及以上的情况下,我希望在列的两个“行”之间存在间距,但在3列的“第一行”之上不存在间距,而在列的“第二行”之下不存在间距3

  • 我有一个基于Bootstrap ver2 css框架的响应性WP主题。一切都可以在桌面上运行:如果测试的大小不同(针对不同的媒体查询),则没有问题。但如果我在电话上测试,则不会加载媒体查询。有什么问题吗。 网站链接:http://moldovan.szanto-zoltan.com/ p、 s:标题包含此项以适合设备宽度

  • 我试图垂直(和水平)中心div(高度和宽度未知)在引导列。我可以水平中心的div设置文本对齐到中心。然而,我正在努力垂直居中的div。下面是我的代码片段: 提前感谢!

  • 为了更好地为移动设备服务,HTML 5推出了一系列针对移动设备的API。 Viewport Geolocation API getCurrentPosition方法 watchPosition方法和clearWatch方法 Vibration API Luminosity API Orientation API 参考链接 Viewport Viewport指的是网页的显示区域,也就是不借助滚动条的

  • 垂直导航主要用于网站的侧边栏导航,使用侧边栏的好处是可以节约空间。因此,一些内容多,而又喜欢简约的网站,常常以侧边栏的方式进行展示。 默认情况下,列表及列表项 li 元素都是块级元素,每个列表项后独占一行。因此,使用无序列表创建垂直导航就非常方便。 首先,创建一个无序列表来包裹导航链接: <ul class = "verticalnav">     <li><a href="#">公司简介</a