html - div col-md-4 内容太大

问题描述

嘿，抱歉，我是论坛中的菜鸟，而且在引导程序中我也遇到了这个问题（我用西班牙语思考，我不知道如何描述它）让我们试试吧。

我得到了三个 col-md-4 (12col) 第一个 col 只是文本，另外两个是图像，这些图像具有自动高度，en 因为第一个似乎大于其余的高度，因此在下面显示了一个间隙图像。

body {
            overflow-x: hidden;
        }
        
        .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }
        
        .carousel {
            padding-right: 0;
            padding-left: 0;
            text-shadow: 2px 2px 4px #000000;
        }
        
        .col-md-4,
        .col-4,
        .col-xs-8,
        .col-md-8,
        .col-lg-8,
        .col-5 {
            padding-right: 0;
            padding-left: 0;
        }
        
        .icons {
            background-image: linear-gradient(to right, rgb(182, 15, 204), rgb(255, 0, 128));
            color: white;
            display: block;
            /* overflow: auto; */
            word-wrap: break-word;
        }
        
        .icons_icon {
            /* padding-top: 50px; */
            display: inline-block;
            vertical-align: middle;
            font-size: 3vw;
        }
        
        .fruta {
            width: 350px;
        }
        
        .img-fluid {
            position: relative;
            background-image: cover;
        }
        
          .circulo {
            /* width: 119px; */
            margin-left: 50px;
            margin-top: 20px;
            height: 6vw;
        }
        
          .color1 {
            background-image: linear-gradient(to right, rgb(15, 176, 204), rgb(255, 0, 128));
            color: white;
        }
        
        .color2 {
            background-image: linear-gradient(to right, rgb(204, 176, 15), rgb(255, 0, 242));
            color: white;
        }
        
        .color3 {
            background-image: linear-gradient(to right, rgb(130, 2, 250), rgb(255, 0, 128));
            color: white;
        }
        
        .Noticias_profile h4 {
            margin: 30px;
            padding-left: 20px;
            bottom: 0;
            overflow-wrap: break-word;
        }
        
        .Noticias_profile {
            height: 2vw;
        }

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--ESTILOS CSS BOOTSTRAP-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!--ESTILOS CSS PROPIOS-->
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <!-- font aweseom -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

<body>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-lg-4 Noticias_profile">

                <div class="container">


                    <div class="row color1">
                        <img class="img-fluid rounded-circle circulo" src="https://alabamaburgerfactory.com/index/img/4anioservicio.jpg" data-holder-rendered="true">
                        <h4>Años de servicio<br>Javier Gonzáles<br>Contáctologo</h4>
                    </div>

                    <div class="row color2">
                        <img class="img-fluid rounded-circle circulo" src="https://alabamaburgerfactory.com/index/img/5reciennacido.jpg" data-holder-rendered="true">
                        <h4>Recien Nacidos<br>Macarena Alfaro<br>Febrero</h4>
                    </div>

                    <div class="row color3">
                        <img class="img-fluid rounded-circle circulo" src="https://alabamaburgerfactory.com/index/img/6cumple.jpg" data-holder-rendered="true">
                        <h4>Cumpleaños<br>Renata Gonzáles<br>Contáctologo</h4>
                    </div>
                </div>


            </div>

            <div class="col-md-4 col-lg-4 ">
                <img class="img-fluid" src="https://alabamaburgerfactory.com/index/img/7beneficios.png">
                <div class="titulo">
                    <p>Beneficios.</p>
                </div>
            </div>

            <div class="col-md-4 col-lg-4 ">
                <img class="img-fluid" src="https://alabamaburgerfactory.com/index/img/8formulario-beneficio.jpg">
                <div class="titulo">
                    <p>Formluario de Beneficios</p>
                </div>
            </div>
        </div>
    </div>

在此处输入图像描述

标签： htmlcssbootstrap-4

html - div col-md-4 内容太大

问题描述

解决方案

推荐阅读