Question

我是使用bootstrap 3的初学者。但是我有一个div应该在Desktop，Mobile和Tablet-Landscape上跨越6列，在Tablet-Portrait上跨越8列。

我正在创建自己的css类，因为我不知道另一种方式。

<div class="my-col-xs-ld-6 td-col-xs-ld-offset-3 td-col-sm-pr-8 td-col-sm-pr-offset-3">
     Content here
</div>

的CSS

 @media screen and (min-width: 768px) and (orientation:landscape) {
  .td-col-xs-ld-6 {
  }
}

@media screen and  (orientation:landscape) {
  .td-col-xs-ld-offset-3 {
  }
}

我知道我有两个为每个班级创建不同的方向。但我被困在这里，不知道如何实现这一点。

Answer 1

这可以帮到你：

网格系统限制：
https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

每种最常用设备的尺寸通常尺寸：
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

现在，比较每个的大小并根据需要设置列，例如，纵向设备（平板电脑）可以达到1024px，因此您可以使用col-md-2或col-lg-2（这将在一行内创建6个相同大小的列），对于更大的屏幕，例如超过1024px，您使用col-xl-2（它将在一行中创建6列）。

永远记住，引导网格系统在一行中总共使用了12列，因此您可以通过多种方式拆分这12列，但最终需要总计12个。例如：
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

修改
所以，如果我理解正确，你想为像bootstrap这样的列创建自己的CSS样式，而不是使用bootstrap。因此，这是各种列的基本引导样式，您可以使用此基础：

position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;

现在，对于您想要的每个尺寸，您需要定义宽度，最好以％为单位，以提高响应速度。（例如：对于4列，除以100％，总宽度，4，所以25％，或类似的东西[记住，如果你有边距，你需要从宽度中减去]）

使用至少4种设备尺寸的媒体查询，例如：小于576像素，小于768像素，小于992像素，大于992像素......

Bootstrap根据不同的方向跨越不同的列

1 个答案: