Question

我正在尝试为人们输入数据创建一个更简单的用户界面，用于高尔夫评分网络应用程序。原则是大按钮按下每个分数，而不是输入。

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

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

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

class TVC: UITableViewController, UISearchResultsUpdating {

let Search = data
var filteredSearch = [[String:AnyObject]]()
var resultSearchController = UISearchController()

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    if (self.resultSearchController.active)
    {
        return self.filteredSearch.count
    }
    else
    {
        return self.Search.count
    }

}


override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = self.tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell?

    if (self.resultSearchController.active)
    {

        cell!.textLabel?.text = (filteredSearch[indexPath.row]["title"] as! String)
        return cell!
    }
    else
    {
        cell!.textLabel?.text = (Search[indexPath.row]["title"] as! String)
        return cell!
    }


}



func updateSearchResultsForSearchController(searchController: UISearchController)
{
    self.filteredSearch.removeAll(keepCapacity: false)

    let searchPredicate = NSPredicate(format: "SELF CONTAINS[c] %@", searchController.searchBar.text!)
    let array = (self.Search as NSArray).filteredArrayUsingPredicate(searchPredicate)
    self.filteredSearch = array as! [[String:AnyObject]]

    self.tableView.reloadData()


}

Answer 2

我认为您想要的是处理所有常规引导断点并将新按钮中的所有步骤作为目标，请尝试以下操作：

<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;
  }
}

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

用于移动设备，平板电脑和桌面的自举网格布局

2 个答案: