用于移动设备、平板电脑和台式机的引导网格布局

Question

我正在尝试为高尔夫计分 Web 应用程序创建一个更简单的 UI，以便人们输入数据。原则是为每个乐谱按下大按钮，而不是输入它们。

我创建了一个额外的 CSS 文件来使按钮大于默认按钮...

.btn-sq-lg {
  width: 150px !important;
  height: 150px !important;
}

.btn-sq {
  width: 100px !important;
  height: 100px !important;
  font-size: 10px;
}

.btn-sq-sm {
  width: 50px !important;
  height: 50px !important;
  font-size: 10px;
}

.btn-sq-xs {
  width: 25px !important;
  height: 25px !important;
  padding:2px;
}

目前我有以下内容，可以在桌面设备上正确显示（忽略“xs”网格单元，这是我在玩的。“lg”网格单元格格式如我所愿......）

<div class="row">
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1">
        <button type="button" class="btn btn-primary btn-sq">Blob</button>

    </div>
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">2</button>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">3</button>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">4</button>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">5</button>
    </div>
</div>
<div class="row">
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1">
        <button type="button" class="btn btn-primary btn-sq">6</button>

    </div>
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">7</button>
    </div>
</div>

如何/什么相当于使相同的格式出现在移动设备上？

我可以根据需要使用备用（自定义）按钮大小，只是为要使用的语法寻找一个好的指导......

Answer 1

我认为您想要的是处理所有常规引导断点并针对新按钮中的所有这些步骤，试试这个：

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">3</button>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">4</button>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">5</button>
    </div>
</div>

/* Anything below xs */ 
@media only screen and (min-width : 1px) {
    .btn-sq {
      padding: 4px;
      width: 20px;
      height: 20px;
      font-size: 8px;
      background-color: black;
      color: white;
  }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 320px) {
    .btn-sq {
      width: 25px;
      height: 25px;
      font-size: 11px;
      background-color: pink;
  }
}

/* Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    .btn-sq {
      width: 50px;
      height: 50px;
      font-size: 13px;
      background-color: yellow;
      color: black;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .btn-sq {
      width: 100px;
      height: 100px;
      font-size: 16px;
      background-color: green;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .btn-sq {
      width: 150px;
      height: 150px;
      font-size: 18px;
      background-color: red;
  }
}

查看我的代码笔：http://codepen.io/httpJunkie/pen/OVKJPZ 它并不完美，但它应该能让你上路。我看到的方式是您只需要创建新的方形按钮类型并设置典型的引导断点。有更聪明的方法可以做到这一点，但这是最容易理解的。

Answer 2

您需要使用媒体查询来根据屏幕大小更改按钮的大小。例如，如果您使用手机，则需要将按钮的宽度/高度更改为 25 像素。平板电脑可以使用 50 像素的宽度/高度，大屏幕可以使用 100 像素。

例如，要处理手机，您可以将其添加到您的 css 文件中：

@media only screen and (max-width: 500px) {
    .btn-sq {
        width: 50px !important;
        height: 50px !important;
        font-size: 10px;
        background-color: yellow;
    }
}