Question

假设我有14个按钮，在手机（xs）中，我会将它们连成一排，然后使用class="col-xs-6"，这样它们就会以一个整洁的2 x 7形式结束。对于桌面（md），我确信它们适合所以他们可以保持一条线。

然而，当在桌面上查看时，我根本不需要网格系统。我可以显示为内联。这有两个原因：

14个按钮无法容纳12个列。即使有嵌套的行，你也会将7个按钮装入12个cols，仍然很讨厌。
使用网格和行意味着每个按钮的宽度必须相等。如果我有一个显示“Go”的小按钮和另一个显示“国际化”的按钮，它们的宽度必须是一列宽度的倍数，如果不相等的话。

我通过在<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

Post Scriptum：
在此代码中，它是“sm”768px
对于“md”，你应该使用992px
对于“lg”1200px

xs中的网格系统不在md中

1 个答案: