如何创建所有宽度相同的 Bootstrap 列?

ones

关注

发信

关注(28)粉丝(399)

如何创建所有宽度相同的 Bootstrap 列?

本文介绍了如何创建所有宽度相同的 Bootstrap 列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的行中有超过 12 列，这使得列垂直堆叠，但顶部的与底部的相比具有不同的大小.


<div class="row"><div class="col-md"></div><div class="col-md"></div><div class="col-md"></div><div class="col-md"></div><div class="col-md"></div>

我正在尝试使用响应式(允许增长)列，但所有列都应具有相同的宽度.

解决方案

您可以尝试插入一个没有内容的 col-md-4 或在一行中只插入 2 个 col-md-4，看看是否对您有帮助.看全屏.(在评论的帮助下修改了答案)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-md-4">1

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

<div class="col-md-4">3

<div class="row"><div class="col-md-4">1

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

<div class="col-md-4" id="last-column">

I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.

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

I am trying to have responsive (allow grow) columns but all columns should carry same width.

解决方案

You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
     2
    </div>
     <div class="col-md-4" id="last-column">
    </div>
  </div>
</div>

这篇关于如何创建所有宽度相同的 Bootstrap 列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 04:28