Question

有一个包含4列和4行的网格。我想要发生的是在一个小显示屏上，第4列在小显示屏上变为第5行，而在显示屏上显示第4列。这是一个宠物项目，可以更好地尝试和理解引导网格布局。我基本上是为练习制作一个响应计算器。我觉得我可以用原始的CSS做到这一点但是想象的bootstrap必须有一些实用程序，这将使这更容易。例如图像。

大幅面：

小格式：

我有一个标记的开始。还有一些相关的CSS，但我不认为它在这个例子中很重要。我有几个版本，但这是我现在所处的位置。

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">1</button>
        <button type="button" class="btn-lg btn-outline-dark">2</button>
        <button type="button" class="btn-lg btn-outline-dark">3</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">4</button>
        <button type="button" class="btn-lg btn-outline-dark">5</button>
        <button type="button" class="btn-lg btn-outline-dark">6</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">7</button>
        <button type="button" class="btn-lg btn-outline-dark">8</button>
        <button type="button" class="btn-lg btn-outline-dark">9</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-light">&plusmn;</button>
        <button type="button" class="btn-lg btn-outline-dark">0</button>
        <button type="button" class="btn-lg btn-outline-light">.</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">X</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">-</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">+</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">=</button>
      </div>
    </div>
  </div>
</div>

编辑：我只能选择一个解决方案作为答案，但kiranvj，WebDevBooster和dferenc都提供了Bootstrap 4发布版本的工作解决方案。我只能将一个标记为答案。对你们其他人来说并不轻微。我的双手被捆绑了。

Answer 1

我会做这样的事情。检查全屏模式并调整为小

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
  <div class="col-12 col-sm-8">
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
  </div>
  <div class="col-12 col-sm-4 text-danger">
    <div class="row">
      	<div class="col-4 col-sm-12">pink</div>
      	<div class="col-4 col-sm-12">pink</div>
      	<div class="col-4 col-sm-12">pink</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为，最简单的标记就是下面的标记。它还使用Order classes，但不是明确设置每个按钮的顺序，而是仅使用/exe触及最后一列中的“额外”按钮。

.order-last .order-sm-0

Answer 3

我要做的是在黑色div下面创建3个额外的粉红色div元素，然后使用hidden-*-up和hidden-*-down类隐藏它们。当屏幕较小时，隐藏右侧的粉红色div并在屏幕较小时显示底部的粉红色div，反之亦然。

Answer 4

由于你想要构建一个计算器，我采用了与我尊敬的同事略有不同的方法，并创建了一个像实际计算器一样的外观，感觉和嘎嘎的网格。我希望你对此并不感到生气。： - ）

主要工作是使用重新排序类完成的。这些允许根据您的断点需求移动东西。

例如，类组合order-3 order-md-1说：

＆＃34;通常情况下，即从最小的屏幕尺寸开始，您将转到第3位，但是从中等（md）屏幕尺寸向上，您将要去位置＃1＆＃34;

由于相邻的HTML元素也有order-1作为默认位置，因此该元素将以与中等大小屏幕相同的顺序显示作为邻居。但是在小于md的屏幕上，元素将成为一个“三等公民”＃34;因此，将位于具有order-2类的元素之后。

<div class="w-100"></div>元素只是方便的分隔符。 w-100表示＆＃34;宽度：100％＆＃34;。

说到分隔符：我注意到你的计算器没有分区按钮，但我希望你能弄明白该怎么做。

最后，您还没有指定如何使用等号按钮。所以，我冒昧地改变了它在小屏幕上的外观。这是通过首先使用d-none d-md-block类隐藏默认按钮，然后使用d-md-none类显示更宽版本来实现的。最后一节基本上说：从md屏幕上隐藏它（显示：无）。

这是工作代码：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<style>
body {
    font-family: 'Roboto Mono', monospace;
}
</style>

<div class="container">
    <div class="row mt-2">
        <div class="col-md-8">
            <div class="row">
                <button type="button" class="btn-lg btn-outline-dark order-1">1</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">2</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">3</button>
                <button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">&times;</button>
                <div class="w-100 order-1"></div>
                <button type="button" class="btn-lg btn-outline-dark order-1">4</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">5</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">6</button>
                <button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">&minus;</button>
                <div class="w-100 order-1"></div>
                <button type="button" class="btn-lg btn-outline-dark order-1">7</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">8</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">9</button>
                <button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">+</button>
                <div class="w-100 order-1"></div>
                <button type="button" class="btn-lg btn-outline-light text-dark order-1">&pm;</button>
                <button type="button" class="btn-lg btn-outline-dark order-1">0</button>
                <button type="button" class="btn-lg btn-outline-light text-dark order-1">.</button>
                <button type="button" class="btn-lg btn-outline-dark order-1 d-none d-md-block">=</button>
                <div class="w-100 order-2"></div>
                <div class="w-100 order-4"></div>
            </div>
            <div class="row">
                <div class="col-3 col-sm-4 pl-0 pr-0 pr-sm-4">
                    <button type="button" class="btn-lg btn-block btn-outline-dark order-4 d-md-none">=</button>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Bootstrap 4 - 小显示屏上的列到行

4 个答案: