文章/答案/技术大牛

发布

社区首页 >问答首页 >div md-4含量过大

问div md-4含量过大
EN

Stack Overflow用户

提问于 2019-11-18 23:14:35

回答 3查看 120关注 0票数 0

嘿，伙计们，对不起，我在论坛上是个新手，也是在引导中，我遇到了这个问题(我想用西班牙语，我不知道怎么描述它)，让我试试吧。

我得到了三个col-md-4 (12 col )，第一个是文本，另外两个是图像，它们有一个高度自动，嗯，因为第一个看起来比其他的高度大，在图像下面显示了一个空白。

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>

在这里输入图像描述

bootstrap-4

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-11-19 00:07:22

你必须做高度:100%，如下所示-流体类，

.img-fluid {
    max-width: 100%;
    height: 100%;
}

注意:您可以删除.row类的边距、左、右边距，因为它可以创建很少的图像重叠。

票数 0

Stack Overflow用户

发布于 2019-11-19 05:06:14

我看了你的网站。您又在col-md-4中添加了行，它正在应用页边距，尝试下面的代码，这样会得到解决

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


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

                <div class="d-flex color2">
                    <img class="img-fluid rounded-circle circulo" src="./img/5reciennacido.jpg" data-holder-rendered="true">
                    <h4>Recien Nacidos<br>Macarena Alfaro<br>Febrero</h4>
                </div>

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

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

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

只需删除row并添加d-flex类即可。

票数 0

Stack Overflow用户

发布于 2019-11-19 15:19:20

谢谢你的回答，它解决了问题，但现在在响应图标看起来不太好，也有什么好的建议的引导课程吗？我做了CSS -完整的指南(包括。Flexbox，Grid &Sass(Flexbox，Grid& Sass)，从头到尾都知道我学到了很多东西，但我还没有做好迎接大项目的准备。

链接链接

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58924314

复制

相似问题

问div md-4含量过大
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div md-4含量过大EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div md-4含量过大
EN