CSS 引导对齐

Question

我正在制作网页，但我似乎遇到了对齐问题。 下排比上排缩进更多。 有没有什么简单的方法可以在不重做整个代码的情况下解决这个问题？ 我有一种感觉，它只是我错过了一些填充，但我找不到它。

任何帮助将不胜感激。

昨天刚开始学习 CSS。

代码：

<div class="container">
    <div class="row" style="height: 395px">
        <div class="col-sm8" style="background-color: lightgrey">
            <iframe src="https://api.kaltura.nordu.net/p/261/sp/26100/embedIframeJs/uiconf_id/14973541/partner_id/261?iframeembed=true&playerId=kaltura_player&entry_id=0_jv96e7co&flashvars[streamerType]=auto" width="662+padding" height="395+padding" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" style="padding-left:25px;"></iframe>

        </div>

        <div class="col-sm4" style="background-color: lightgrey; ">
            <div class="imageContainer" style="padding-left: 30px">
                <img src="Fronter_Canvas.png" style="height: 395px; align-content: center; padding-left: 20px; padding: 10px;">
                <div class="dato">1.Juni.2018</div>
            </div>    
        </div>     
    </div>


<div class="container-fluid"  style="padding-top: 10px; height:380px">
    <div class="row" style="background-color: lightgrey; height: inherit; width: 960px">
        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                <h4><b>Topp 5 Spørsmål.</b></h4>
                <p>For deg som er ny til Canvas.</p>
            </div>
            </div>
        </div>

    <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px; ali">
                <div class="container">
                    <h4><b>Fakultetskontakt</b></h4>
                    <p>Finn din Canvas kontakt på ditt institutt.</p>
                </div>
            </div>
       </div>

    <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Kurskontakt</b></h4>
                    <p>Få en oversikt over kursene.</p>
                </div>
            </div>
        </div>

    <div class="col-3">
                <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Innføringsplan av Canvas</b></h4>
                    <p>Hvordan canvas skal rulles ut.</p>
                </div>                      
            </div>
        </div>
    </div>
</div>

.containter{
    padding: 2px 16px;
}

.imageContainer{
    position: relative;
    text-align: center;
}

.dato{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    padding-top: 250px;
    font-family: sans-serif;
    font-style: normal;
    padding-left: 30px
}

.card{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 350px;
    float: left;
    padding: inherit;
    margin: inherit;
    padding: 10px;
    display: inline-block;
}

.col-3{
    height: 250px;
    padding: 10px;
}

.row{
    height: 250px    
}

My result.

Answer 1

Div 没有先关闭 container 也 class 名称错误 col-sm8 col-sm-8 col-sm-4 或 col-3 到 col-md,lg,sm,xs,-3

<div class="container">
    <div class="row" style="height: 395px">
        <div class="col-sm8" style="background-color: lightgrey">
            <iframe src="https://api.kaltura.nordu.net/p/261/sp/26100/embedIframeJs/uiconf_id/14973541/partner_id/261?iframeembed=true&playerId=kaltura_player&entry_id=0_jv96e7co&flashvars[streamerType]=auto" width="662+padding" height="395+padding" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" style="padding-left:25px;"></iframe>

        </div>

        <div class="col-sm4" style="background-color: lightgrey; ">
            <div class="imageContainer" style="padding-left: 30px">
                <img src="Fronter_Canvas.png" style="height: 395px; align-content: center; padding-left: 20px; padding: 10px;">
                <div class="dato">1.Juni.2018</div>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid" style="padding-top: 10px; height:380px">
    <div class="row" style="background-color: lightgrey; height: inherit; width: 960px">
        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Topp 5 Spørsmål.</b></h4>
                    <p>For deg som er ny til Canvas.</p>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px; ali">
                <div class="container">
                    <h4><b>Fakultetskontakt</b></h4>
                    <p>Finn din Canvas kontakt på ditt institutt.</p>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Kurskontakt</b></h4>
                    <p>Få en oversikt over kursene.</p>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Innføringsplan av Canvas</b></h4>
                    <p>Hvordan canvas skal rulles ut.</p>
                </div>
            </div>
        </div>
    </div>
</div>