Bootstrap 旋转木马和列不会彼此相邻

Question

目标： 我想创建一个 bootstrap 行，其中左侧有旋转木马，右侧有文本块。我在 HTML 评论中分别标记了这些“左栏”和“右栏”。

问题： 我无法让轮播和文本留在列中。相反，它们堆叠在一起，旋转木马在上面，下一列在它下面。

上下文： 我通过移动 div 和创建新的 div 尝试了一些不同的东西。我已经尝试删除 flex CSS 样式，并且我已经尝试删除所有填充和边距。我已经审查了几个看起来相似的堆栈溢出问题，但 none 个问题似乎与我的相似，或者建议没有帮助。

主 CSS 中似乎没有任何内容导致此问题，因为我能够让其他列和行在同一页面上正常工作。但是，我在这里添加它以防万一截图。

HTML

    <div class="container">
        <div class="row">

            <!-- Left Column Start -->
            <div class="col-6" id="carousel-contain">
                <div id="plantCarousel" class="carousel slide col-6" data-ride="carousel" data-interval="false">
                    <ol class="carousel-indicators">
                        {% for image in plant.plant_images.all %}
                            {% if forloop.first %}
                                <li data-target="#plantCarousel" data-slide-to="{{forloop.counter0}}" class="active"></li>
                            {% else %}
                                <li data-target="#plantCarousel" data-slide-to="{{forloop.counter0}}"></li>
                            {% endif %}
                        {% endfor %}
                      <li data-target="#plantCarousel"></li>
                    </ol>
                    <div class="carousel-inner">
                        {% for image in plant.plant_images.all %}
                            {% if forloop.first %}
                        <div class="carousel-item active">
                            {% else %}
                            <div class="carousel-item">
                            {% endif %}
                                <img src="{{ image.images.url }}" alt="{{ plant.name }}">
                            </div>
                        {% endfor %}
                        </div>
                
                        <a class="carousel-control-prev" href="#plantCarousel" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#plantCarousel" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Left Column Ends -->

            <!-- Right Column Start -->
            <div class="col-6">
                <p> <b>Latin Name: </b>{{ plant.latin_name }} </p>
                <br>
                <p><b>Description: </b></p>
                <p> {{ plant.description }} </p>
                <br>
                <br>
            </div>
            <!-- Right Column Ends --> 
    
        </div>
    </div>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

img {
  max-width: 100%;
  max-height: 100%;
}

它在页面上的显示方式：

Answer 1

进一步研究后，我发现我不小心添加了一个额外的 </div>，这导致我的行在可以将正确的列添加到行中之前结束。

Bootstrap 旋转木马和列不会彼此相邻

Bootstrap carousel and column will not stay next to each other

html

css

twitter-bootstrap

bootstrap-4