Bootstrap 4 Grid 14 col在2行中相同的大小

问题描述

我需要构建一个两行14列（每行7列）的引导网格，如下图所示 What I need

https://codepen.io/amaro-chapel/pen/KKzVKgz（但在2行中有7列！）

但是到目前为止，我还没有找到一种方法来实现这一目标。列必须始终保持相同大小，并且当用户调整页面大小或在小型设备（如智能手机）中打开时，网格列应保持堆叠状态。

如果我将col-md-2更改为在调整大小期间仅对列进行排序，将使用不同的大小...而我不想要那样。

有人可以帮我得到我需要的东西吗？我知道在stackoverflow上还有其他一些示例，但是它们都不适合我需要。

What I have so far

https://codepen.io/amaro-chapel/pen/WNwQqxv

我的代码：

<html lang="en">

<head>
<title>Bootstrap Example</title>
<Meta charset="utf-8">

<Meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5paxtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



<style type="text/css">
[class*="col-"] {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.row {
  border-top: 1px solid black;
  border-left: 1px solid black;
}




</style>

</head>

<body>

 <br />

 <div class="container-fluid">

   <div class="row ">

  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>1</div>        
    <div>SOME TEXT</div>               
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>2</div>        
    <div>SOME TEXT</div>
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>3</div>        
    <div>SOME TEXT</div>                  
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>4</div>  
    <div>SOME TEXT</div>     
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>5</div>        
    <div>SOME TEXT</div>       
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>6</div>          
     <div>SOME TEXT</div>        
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>7</div>        
    <div>SOME TEXT</div>      
  </div>


  <div class="col-md-2 center-block text-center" style="min-width:200px;" >
    <div>8</div>        
    <div>SOME TEXT</div>               
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>9</div>        
    <div>SOME TEXT</div>
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>10</div>        
    <div>SOME TEXT</div>                  
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>11</div>  
    <div>SOME TEXT</div>     
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>12</div>        
    <div >SOME TEXT</div>       
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>13</div>          
     <div>SOME TEXT</div>        
  </div>
  <div class="col-md-2 center-block text-center" style="min-width:200px;">
    <div>14</div>        
    <div>SOME TEXT</div>      
  </div>


 </div>



</div>


</body>

</html>

预先感谢，卡佩尔

解决方法

我只是在玩弄它，并将所有col-md-2设置为col-md-1。我还设置了min-width: 200px;和max-width: 250px;。您还将需要有两个行包装器，一个围绕1-7，一个围绕8-14 尝试一下，希望您能得到自己想要的东西。

Bootstrap网格默认情况下将页面分为12列，但是您可以通过使用“ col”类创建所需数目的列，而无需指定大小。这样，该行将被分成与您创建的列一样多的列。

示例：https://codepen.io/MimoTooThanks/pen/RwaWzjO

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
    </div>
    <div class="row">
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col">11</div>
        <div class="col">12</div>
        <div class="col">13</div>
        <div class="col">14</div>
    </div>
</div>

请记住，您仍然可以结合使用响应式类，例如：https://codepen.io/MimoTooThanks/pen/zYqvVMj

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md">1</div>
        <div class="col-12 col-md">2</div>
    </div>
</div>

“ col-12”表示，由于未指定，这些列将在任何屏幕尺寸上跨越12列（整页）。

大于中号的屏幕将并排显示各列。那是因为“ col-md”类。在这种情况下，由于未定义列大小，因此基本上是说“如果屏幕中等或更大，则使列相等”，这也将覆盖先前的“ col-12”类。

请查看引导网格文档： https://getbootstrap.com/docs/4.0/layout/grid/

编辑：

请参见此处的示例，该示例通过使用max-width和与引导程序断点相匹配的媒体查询来使列保持相等的宽度：https://codepen.io/MimoTooThanks/pen/gOraVvm

@media (min-width: 768px) { 
    .col {
        max-width: 14.28571428571429%
    }
}

注意：如果更改列数，则需要重新计算百分比。

您可以给5列col-2和2列col-1，这样一来就可以有7列。希望这行得通。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-2">c1</div>
<div class="col-2">c2</div>
<div class="col-2">c3</div>
<div class="col-2">c4</div>
<div class="col-2">c5</div>
<div class="col-1">c6</div>
<div class="col-1">c7</div>
</div>