bootstrap 手机、平板电脑和桌面的网格布局

Question

我正在尝试创建一个更容易 UI 供人们输入数据的高尔夫计分 Web 应用程序。原则是每个乐谱都要按大按钮，而不是输入。

我创建了一个额外的 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

您需要使用媒体查询来根据屏幕大小更改按钮的大小。例如，如果您在单元格 phone 上，则需要将按钮更改为 25px 的 width/height。您可以为平板电脑使用 50px 的 width/height，为更大的屏幕使用 100px。

例如，要处理一个单元格 phone，您可以将其添加到您的 css 文件中：

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

Answer 2

我想你想要的是处理所有常规 bootstrap 断点并在你的新按钮中定位所有这些步骤，试试这个：

<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 它并不完美，但它应该让你走上正轨。我的看法是您只需要创建新的方形按钮类型并设置典型的 bootstrap 断点。有更聪明的方法可以做到这一点，但这是最容易理解的。

bootstrap 手机、平板电脑和桌面的网格布局

bootstrap grid layout for mobile, tablet and desktop

css

grid

button

twitter-bootstrap