在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作为引导程序使用它们进行布局，如

的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;
    }
}