如何并排显示电影和电视

Question

我想与django_bootsrap并排显示电影和电视。电影左侧电视右侧。但我不知道如何显示电影左侧电视右侧。

我显示django的电影和电视。下面的html代码。我还不是CSS。

<h1>TV Score_by</h1>
<div class="row">
    {% for m in movie %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/movie/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>
<h1>TV Score_by</h1>
<div class="row">
    {% for m in tv %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/tv/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>

Answer 1

使用列。

<h1>TV Score_by</h1>
<div class="row">
<div class="col">
    {% for m in movie %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/movie/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>
<h1>TV Score_by</h1>
<div class="col">
    {% for m in tv %}
        <div class="card" style="width: 18rem;">
            <img src="https://image.tmdb.org/t/p/w200{{ m.poster_path }}" class="card-img-top" alt="...">
            <div class="card-body">
            {% if not m.name %}
                <h5 class="card-title">{{ m.title }}</h5>
            {% else %}
                <h5 class="card-title">{{ m.name }}</h5>
            {% endif %}
            <p class="card-text">{{ m.overview }}</p>
            <a href="/tv/{{ m.id }}/" class="btn btn-primary">View Details</a>
            </div>
        </div>
    {% endfor %}
</div>
</div>