Bootstrap 4 Grid 14 col 2行大小相同答案

【问题标题】：Bootstrap 4 Grid 14 col same size in 2 rowsBootstrap 4 Grid 14 col 2行大小相同
【发布时间】：2020-12-02 06:21:47
【问题描述】：

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

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

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

如果我将 col-md-2 更改为简单地 col 调整大小期间的列将具有不同的大小......我不希望那样。

有人可以帮我得到我需要的东西吗？我知道这是 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>

提前致谢，卡佩尔

【问题讨论】：

标签： grid bootstrap-grid

【解决方案1】：

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

【讨论】：

感谢您的回复。如果我理解...您将 col-md-2 更改为 col-md-1 并在样式上添加 style="min-width:200px;max-width: 250px"，对吗？如果是这样，它没有工作。
我编辑了我的回复，包括添加另一个 div.row 包装器。一个包装纸在 1-7 左右，一个包装纸在 8-14 左右。希望这行得通！
如下图所示...当我调整浏览器大小时...保持未格式化...因此我没有将 div.row 包裹在 1-7 和另一行周围.div 包装器在 8-14 左右...以避免这个问题..我认为它必须是引导程序的简单解决方案..但我不知道...i.ibb.co/myqnB00/pic2.png

【解决方案2】：

默认情况下，引导网格将页面分为 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%
    }
}

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

【讨论】：

感谢您的回答。正如我在问题中所说的那样，我已经尝试过仅使用“col”并使用明确的 2 行.. 但是如果您尝试在 col div 中放置一些文本而不是仅 1 或 2 行...您会看到列将是未成形的（不同尺寸），你明白我的意思吗？
@akpel 抱歉，错过了那部分。在这种情况下，我建议为自定义断点下的列设置一个最大宽度，该断点与引导程序之一匹配。在此处查看断点：getbootstrap.com/docs/4.0/layout/overview/…
@akpel 我已经更新了我的帖子，希望能更好地回答您的问题。
基本上我需要这个 codepen.io/amaro-chapel/pen/OJNyKvg 但使用引导程序 4。
你接近我需要但仍然是 2 pbs：第一个，每列必须具有最小宽度，第二个在浏览器上调整大小时应该堆叠。谢谢

【解决方案3】：

你可以给五个 col-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>

【讨论】：

感谢您的代码。但我需要所有列的大小相同...
那么您如何将 class="col-1" 给所有 siven div 一行，然后将另一行用于具有相同类的 7 列..这就是您可以将 7 列分配给 2行。