在 Bootstrap 3 中更改 css 移动/桌面版本

Question

我的网站分为主要内容和一些额外内容。使用大屏幕时，额外内容应显示在网站的右侧；使用小屏幕时，应显示在主要内容下方。

因此我有以下结构：

<div class="row">
  <div class="col-md-10 col-xs-12">main content</div>
  <div class="col-md-2 col-xs-12">extra content</div>
</div>

一切正常，但现在我想用一条简单的线分隔各列。所以我所做的是将 border-right: 1px solid #ddd 添加到主要内容列。这在桌面设备上看起来不错，但我如何获得它，以便在移动设备上边框消失并添加 border-bottom: 1px solid #ddd？

我可以使用 JS 来检测屏幕尺寸，然后应用正确的 CSS，但这是一种欺骗方式，我希望网站也能在禁用 JS 的情况下工作。

也许还有另一种使用边框分隔列的方法？

Answer 1

您应该使用 Media-queries，因为 bootstrap 将它们用于像

这样的布局

html

<div class="row">
  <div class="col-md-10 col-xs-12 main">main content</div>
  <div class="col-md-2 col-xs-12">extra content</div>
</div>

css

@media (min-width: 768px)
{
.main 
{
border-right: 1px solid #ddd;
}
}
@media (max-width: 768px)
{
.main 
{
border-bottom: 1px solid #ddd;
}
}

Answer 2

您可以设置自己的媒体查询。这是一个可以与自定义 css 文件一起使用的示例（使用移动优先方法）

// Assume mobile devices first:
.col-md-10 {
    border-bottom: 1px solid #ddd
}

/* When the screen get to at least "sm" breakpoint change the borders
   Small devices (tablets, 768px and up)
*/
@media (min-width: 768px) {
    .col-md-10 {
         border-bottom: 0;
         border-right: 1px solid #ddd;
    }
}

在 Bootstrap 3 中更改 css 移动/桌面版本

Change css on moblie / desktop version in Bootstrap 3

css

twitter-bootstrap

twitter-bootstrap-3

html

css