Question

我有以下html模板：

<div class='row'>

    <div class='col-md-6'>
        <div class='card mx-auto'>
            <div id='main'>
                {% for candidate in candidates %}
                    <div class='w-75 card mx-auto'>
                        <p class='align-bottom'><strong>{{candidate.UserID.get_full_name}}</strong><input type="number" class='float-right'></p>
                    </div>
                {% endfor %}
            </div>
            <br>
            <button id='send' type="submit" class='btn btn-outline-dark mx-auto'>Submit</button>
        </div>
    </div>
    <div class='col-md-6'>
            {% include 'ballot_info.html' %}
    </div>

</div>

卡片当前占据了它所在的所有列。有没有办法在卡片的外部创建一个边距，这样就不会对页面的边缘产生影响？特别是，有没有办法使用Bootstrap而不是普通的CSS？

Answer 1

看起来你没有容器。 .row should always be inside a container。

以页面为中心：

<div class="container">
  <div class="row">
    <div class="col-md-6">
        <div class="card mx-auto">
        </div>
    </div>
    <div class="col-md-6">..</div>
  </div>
</div>

全宽度：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
        <div class="card mx-auto">
        </div>
    </div>
    <div class="col-md-6">..</div>
  </div>
</div>

如果您想在col我们Bootstrap 4 spacing utilities内的卡片周围留出余量：

演示：https://www.codeply.com/go/7i0bEY2eea

如何在Bootstrap卡周围创建边距？

1 个答案: