Question

我尝试设计类似于Google Keep的用户界面，并使用自举和material design。

我已将内容分为3列，但卡之间添加了大量虚假的垂直空间。我该如何删除它？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vertical Space Issue</title>
    <!-- Material Design fonts -->
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

    <!-- Bootstrap and Material Design -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.iife.js"></script>

</head>

<body style="background-color: #00BCD4;">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-block">
                        <h1 class="card-title">Some random title</h1>
                        <p class="card-text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-block">
                        <h1 class="card-title">Some random title</h1>
                        <p class="card-text">
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.
                            <br /> Ea harum facere, non reiciendis nemo amet voluptatem at.</p>
                            <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-block">
                        <h1 class="card-title">Some random title</h1>
                        <p class="card-text">
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-block">
                        <h1 class="card-title">Some random title</h1>
                        <p class="card-text">
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis Enim ad sint non eum error perferendis, culpa, dicta </p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-block">
                        <h1 class="card-title">Some random title</h1>
                        <p class="card-text">
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.
                                <br />  Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-block">
                        <h1 class="card-title">Some random title</h1>
                        <p class="card-text">
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.
                              <br> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                            <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Answer 1

这是一个引导程序，原来是这样做的一个类！

将所有卡片包裹在<div class="card-columns">中。

http://v4-alpha.getbootstrap.com/components/card/#columns

Bootstrap的垂直空间问题

1 个答案: