Question

如何通过底部卡boostrap 4垂直对齐。通过bootstarp 4底部对齐。我正在尝试将Bootstrap 4（4.0.0-alpha.6）中心的超大屏幕内容垂直对齐。在Mac桌面上的Chrome和Safari上，这种情况发生得很好，但在我的iOS设备上，文本仍与顶部对齐，这两种情况都没有。

.container-fluid > .row {
  overflow-x: auto;
}

<html><head><link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<link href="/css/fullcalendar.min.css" rel="stylesheet">
<link href="/css/fullcalendar.print.min.css" rel="stylesheet" media="print">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="/js/lib/moment.min.js"></script>
<script src="/js/lib/jquery.min.js"></script>
<script src="/js/fullcalendar.min.js"></script>
<script src="/js/gcal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>



</head>
<body>
    <div class="container-fluid">
        <h2>Bootstrap Horizontal Scrolling with Flexbox</h2>
        <div class="row flex-row flex-nowrap">
        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>

        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>

        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title 123 42332 4324 2342 423 234 23</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>

        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>

        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>

        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>

        
            <div class="col-3">
                <div class="card card-block">
                    <img class="card-img-top" src="..." alt="Card image cap" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <a href="#" class="btn btn-danger">Ошибка</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body></html>

将卡对准底部。我希望那张卡片的底部对齐，并且我可以水平滚动

如何通过底部卡boostrap 4垂直对齐

0 个答案: