css - 网格系统仅在 xs 中不在 md 中

Question

假设我有 14 个按钮，在电话 (xs) 中，我会将它们排成一排，并使用 class="col-xs-6"所以他们最终形成了一个整齐的 2 x 7 阵型。对于桌面 (md)，我确信它们会适合，因此它们可以保持在一条线上。

但是在桌面上查看时，我根本不需要网格系统。我只能显示为内联。这有两个原因:

• 12 个列放不下 14 个按钮。即使有嵌套行，您也会将 7 个按钮放入 12 个列中，这仍然很糟糕。

• 使用网格和行意味着每个按钮的宽度必须相等。如果我有一个写着“开始”的小按钮和另一个写着“国际化”的小按钮，它们的宽度必须是一列宽度的乘积，如果不相等的话。

我找到了一种方法，在 <div class="visible-xs-block"> 中连续放置 14 个按钮.对于桌面，我直接将 14 个按钮(没有行)放入 <div class="visible-sm-block visible-md-block visible-lg-block">

有没有更优雅的方法来做到这一点？我非常反对拥有重复代码并在每次更新某些内容时都必须维护它们的想法。谢谢!

Answer 1

一种方法是使用媒体查询。

HTML

<div class="container">
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">1</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">2</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">3</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">4</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">5</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">6</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">7</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">8</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">9</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">10</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">11</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">12</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">13</button></div>
    <div class="col-xs-6 inline_from_sm"><button class="btn btn-info">14</button></div>
</div>

CSS

@media (min-width: 768px) { 
    .inline_from_sm{
    display: inline-block;
    width: initial;
    float: initial;
    padding: initial;
    }
}

Bootply : http://www.bootply.com/H5QMXp6tdA

后记:
在此代码中，它适用于“sm”768px
对于“md”，您应该使用 992px
对于“lg”1200px