如何在CSS / bootstrap中使每行两行，每行7列/平铺？

Question

我正在尝试设计一个简单的HTML游戏，其布局包括两行，每行连续7列/小块，以及一个大列/小块。

或者在这里简单地模拟这个游戏。 在游戏中可以看到，中间的磁贴分别为7向上和7向下，左侧和右侧为较大的磁贴。

我使用css脚本，如：

.grid-row {
    margin-bottom: 15px;
}
.grid-container {
position: absolute;
z-index: 1; }

.grid-row:after {
    content: "";
    display: block;
    clear: both; }

.grid-cell {
    width: 106.25px;
    height: 106.25px;
    margin-right: 15px;
    float: left;
    border-radius: 3px;
    background: rgba(238, 228, 218, 0.35); }

上面根据需要在容器中生成我的图块，例如：

<div class="row">
        <div class="game-container">
            <div class="grid-container">
               <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
           </DIV>
        </div>
</div>

但是，我很难生成两个大图块。 我想到将行分为左右，中列，例如：

.column-left{ float: left; width: 10%; }
.column-right{ float: right; width: 10%; }
.column-center{ display: inline-block; width: 80%; }

然后将上面的网格行添加到column-center类中。 然后在左右两列中创建一个，在下面添加一个名为grid-mega-cell的单个图块：

.grid-cell {
        width: 106.25px;
        height: 212.50px;
        margin-right: 15px;
        float: left;
        border-radius: 3px;
        background: rgba(238, 228, 218, 0.35); }

以上仍然失败。 我也尝试使用引导程序列。 div.col-md.col-md-offset-1中的两个大div.col-md.col-md-offset-1和div.col-md-8的中间div.col-md-8 。 一切仍然失败。

Answer 1

您可以使用默认的引导程序类来执行此操作。 在.container内部使用此标记：

<div class="row">
   <!-- First Pane -->
   <div class="col-md-2">...</div>

   <!-- Middle Section -->
   <div class="col-md-8">
        <!-- First row of 4 divs -->
        <div class="row">
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
        </div>


        <!-- Second row of 4 divs -->
        <div class="row">
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
        </div>
   </div>

   <!-- Last Pane -->
   <div class="col-md-2">...</div>

</div>

---

要连续添加7列， 此答案提供了一个很好的解决方案。 基本上，它使用以下CSS将row的行为设置为seven-cols row ，从而覆盖该row的行为，然后在该行内使用7 col-md-1来具有7个相等的列（请参见演示的代码段）：

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
width: 100%;
*width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
  }
}

HTML：

<div class="row seven-cols">
    <div class="col-md-1">...</div>
    <!-- 6 more of these -->
</div>

全页查看结果，以确保.col-md-*规则有效。 如果你想在网格上的小屏幕以及工作，只需更换所有.col-md-*类.col-xs-*或.col-sm-*根据您的要求）。

 .col-md-1, .col-md-2, .col-md-3 { background: rgba(0, 0, 0, 0.1); outline: 1px #000 solid; } @media (min-width: 768px){ .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 100%; *width: 100%; } } @media (min-width: 992px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; } } /** * The following is not really needed in this case * Only to demonstrate the usage of @media for large screens */ @media (min-width: 1200px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <!-- First Pane --> <div class="col-md-2">First<br><br>Pane</div> <!-- Middle Section --> <div class="col-md-8"> <!-- First row of 4 divs --> <div class="row seven-cols"> <div class="col-md-1">R11</div> <div class="col-md-1">R12</div> <div class="col-md-1">R13</div> <div class="col-md-1">R14</div> <div class="col-md-1">R15</div> <div class="col-md-1">R16</div> <div class="col-md-1">R17</div> </div> <!-- Second row of 4 divs --> <div class="row"> <div class="col-md-3">R21</div> <div class="col-md-3">R22</div> <div class="col-md-3">R23</div> <div class="col-md-3">R24</div> </div> </div> <!-- Last Pane --> <div class="col-md-2">Last<br><br>pane</div> </div> 

输出截图：

Answer 2

HTML

 <div class="row">
        <div class="col-md-2">
            text</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
                <div class="col-md-3">
                    text</div>
            </div>
        </div>
        <div class="col-md-2">
            text</div>
    </div>

Answer 3

您可以尝试以下方法：

 <div class="row">
     <!-- First Pane -->             
     <div class="col-md-2"></div>

     <!-- Middle Section --> 
     <div class="col-md-2">
        <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>

      <div class="col-md-2">

         <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>

      <div class="col-md-2">

         <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>

      <div class="col-md-2">

         <!-- upper part -->
         <div class="row">
             <div class="col-md-12"></div>
         </div> 

          <!-- lower part -->
          <div class="row">
             <div class="col-md-12"></div>
         </div> 
     </div>
     <!-- end of Middle Section -->


      <!-- Last Pane --> 
     <div class="col-md-2"></div>

</div>