引導輪播和列不會彼此相鄰

目標： 我想創建一個引導行，其中左側有輪播，右側有文本塊。我在 HTML 注釋中分別標記了這些“左欄”和“右欄”。

問題： 我無法讓輪播和文本留在列中。相反，它們相互堆疊，旋轉木馬在頂部，下一列在其下方。

背景： 我通過移動 div 和創建新的 div 嘗試了一些不同的事情。我已經嘗試洗掉 flex CSS 樣式，并嘗試洗掉所有填充和邊距。我已經查看了幾個看起來相似的堆疊溢位問題，但沒有一個問題與我的相似，或者這些建議沒有幫助。

似乎主 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%;
}

它在頁面上的顯示方式：

uj5u.com熱心網友回復：

在進一步挖掘之后，我發現我不小心添加了一個額外的</div>內容，導致我的行在右列可以添加到行之前結束。

標籤：html css 推特引导 引导程序 4

上一篇：列中元素之間的空間反應boostrap

下一篇：如何根據焦點更改類并更改React中的輸入表單