Bootstrap类高度与容器中的图像高度不匹配

时间:2016-11-22 15:15:32

标签: html css twitter-bootstrap alignment

我有一个容器里面有两个类。一个是5而另一个是7.5是文本,7是图像。 问题是身高。由于文本的原因,第一类5的高度比图像大。但是我想让它匹配。看看图片。 enter image description here

蓝色是容器(12)。绿色文本为文本5,图像为7.这是代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Mobtech </title>

        <!--Ubaci bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="css/basic-template.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    </head>
    <body>      
    <div class="container"> <!--Container 2 - Popust studentima -->
                    <div class="row">
                        <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
                        <div class="col-lg-12 bg-primary"> 
                            <div class="col-lg-5 bg-zelenapozadina">
                                <center> <font face="Roboto Condensed" size="6"> Popust studentima </font> </center>
                                <p> 
                                <font face="Roboto Condensed" size="4"> 
                                Lorem ipsum dolor sit amet, his no postulant liberavisse. At nibh lucilius sed. Omnium latine efficiendi ea vis. Elit facilisis mel et. Eu qui erat tation elaboraret. Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.Ut nec tamquam vocibus urbanitas, =

                                </font>
                                </p>
                            </div>

                            <div class="col-lg-7 bg-danger" style="padding-left: 0px;  padding-right: 0px;">
                                <center> <img src="Slike/studenti.jpg" class="img-responsive"> </center>
                            </div>

                        </div>



                <!-- JavaScript fajl -->
                <script src="js/jquery.min.js"></script>
                <!-- Kompresovan JavaScript fajl -->
                <script src="js/bootstrap.min.js"></script>


                <!-- bg-warning = Pozadina zuta -->
        </body>
    </html>

0 个答案:

没有答案
相关问题