Question

这就是我的例子：

这是与此相对应的代码：

HTML：

<div class="row">
<div class="formulaire-rdv">
    <div class="col-xs-12 nopadding" style="margin-top:auto;">
        <div style="display:flex;">
            <h2 class="slide-title-dark">
                Prise de Rendez-vous
            </h2>
        </div>
    </div>
    <div class="col-xs-12 nopadding" style="margin-top:100px;">
        <div class="col-sm-4 col-xs-12 col-sm-offset-1">
            <form id="form-rdv">
                <div class="form-group">
                    <label for="exampleInputEmail1">Nom, Prénom:</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Votre nom, prénom">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Nom de société:</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Le nom de votre société">
                </div>
                <div class="form-group">
                    <label for="datetimepicker4">Date:</label>
                    <input type='text' class="form-control" id='datetimepicker4' placeholder="Sélectionnez une date" />
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Message:</label>
                    <textarea class="form-control" rows="4" placeholder="Votre Message"></textarea>
                </div>
                <button type="submit" class="btn btn-default">Envoyer</button>
            </form>
        </div>
        <div class="col-sm-5 col-sm-offset-1">
            <div class="Flexible-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.090588107181!2d2.2261348518741295!3d48.87554960734967!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e664de82918609%3A0x12912c17a8dd9551!2s83+Rue+Carnot%2C+92150+Suresnes%2C+France!5e0!3m2!1sfr!2sch!4v1464688931681" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    <div class="col-xs-8 col-xs-offset-2" style="margin-top:50px; text-align:center; margin-bottom:auto;">
        <p class="p-rdv">L’ajout, la modification ou le remplacement de biens dans la vitrine ne prend que quelques secondes grâce à l’outil d’administration</p>
    </div>

</div>

CSS：

.form-group{
    margin-bottom: 70px !important;
}

/* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.p-rdv{
    margin-right: auto;
    margin-left: auto;
    font-family: $theme-font-light;
    font-size: 30px;
}

我认为整个区块是垂直居中的，我在第一个col-12和边缘底部尝试了一个自上而下的自动：在最后一个上自动但是它没有工作...任何想法？

Answer 1

{{1}}

Margin-top：auto不起作用，如果你必须在中心显示给出与高度相同的行高，那么句子在垂直方向上对齐

垂直居中几个引导列

1 个答案: