html - 使用 twitter Bootstrap 在不同视口(viewport)上操作表格单元格大小和宽度

Question

我基本上想在我的设计中有一个表格，其大小从 3 X 3 到 7 X 7 并且需要完整的表格也适合小屏幕.

所以现在更深入一点，当屏幕尺寸是移动设备时，我希望表格拉伸(stretch)到全宽，而在更大的屏幕上 strong> 我需要它们位于屏幕中心。此外，在任何屏幕尺寸下，单元格尺寸都应为 width = height，换句话说就是一个正方形。

如何仅使用 CSS 和 TWITTER-BOOTSTRAP 来做到这一点？

附注:我是 bootstrap 的新手。

HTML

<div class="site-wrapper">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
            </div>
        </div>
    </nav>
<div class="container">
        <table class="table table-bordered">
            <tr>
                <td data-cell="0"></td>
                <td data-cell="1"></td>
                <td data-cell="2"></td>
            </tr>
            <tr>
                <td data-cell="3"></td>
                <td data-cell="4"></td>
                <td data-cell="5"></td>
            </tr>
            <tr>
                <td data-cell="6"></td>
                <td data-cell="7"></td>
                <td data-cell="8"></td>
            </tr>
        </table>
    </div>
</div>

CSS

body {
    background-color: #fff;
    color: #ffffff;
    text-align: center;
    margin: 0;
}
html, body {
    height: 100%;
    background-color: #333;
    /*overflow: hidden;*/
}
a {
    color: #ffffff;
}
a:hover, a:active {
    color: #ffffff;
}
.site-wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    border-top: 5px solid #5A332B;
    background-color: #ccbb99 !important;
}

Answer 1

如果我理解您的问题，那么您应该将 table 结构更改为 div。因为每个设备屏幕尺寸都需要方形框。此外，您还需要编写一些 JavaScript 或 jQuery。

$(function(){
  var newBoxHeight= $('#square-box .col-xs-4').outerWidth();
  $('#square-box .col-xs-4').outerHeight(newBoxHeight);
});

.col-xs-4{
  border: 2px solid #000000;
}
.col-xs-4:nth-child(2n+1){
  background-color: #020202;
}
.col-xs-4:nth-child(2n+2){
  background-color: #121212;
}
.center-content{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.table-box,
.tbale-cell-box{
  color: #ffffff;
  font-size: 60px;
  height: 100%;
  width: 100%
}
.table-box{
  display: table;
  text-align: center;
}
.tbale-cell-box{
  display: table-cell; 
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" id="square-box">
    <div class="col-xs-4 col-sm-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">1</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">2</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">3</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">4</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">5</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">6</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">7</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">8</span></span></div></div>
                <div class="col-xs-4"><div class="center-content"><span class="table-box"><span class="tbale-cell-box">9</span></span></div></div>
  </div>
</div>

希望对您有所帮助。