时间戳

首页 > 解决方案 > 引导程序中的“row-fluid”问题，为什么我的“divs”正在跳线？

html - 引导程序中的“row-fluid”问题，为什么我的“divs”正在跳线？

问题描述

出于某种原因，“col-8”下第 4 行下的“Long Text”内容被放置在“col-4”下而不是旁边。我试过使用“span4”和“span8”代码但没有用。

<div class="container-fluid">
        <div class="row-fluid">
            <div class = "col-12 titles">
                <h1>Global Warming is Real</h1>
            </div>
        </div>
        <div class="row-fluid">
            <div>
                <div class = "col-12">
                    <img src="./pics/mainPic.jpg" alt="Responsive image" class = "img-fluid pics">
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="col-12">
                <h2 class = "titles"> What are the causes? </h2>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-4">
                <img src="./pics/burningFossil.jpg" alt="" class ="img-thumbnail rounded-circle pics" id = "pics-fossil">
            </div>
            <div class="col-8">
                Long Text
            </div>
        </div>
    </div>```

标签： htmlgridrowcol

解决方案

您可以通过添加类float-left和float-right行来解决此问题，具体取决于您希望它们位于哪一侧

<div class="row-fluid">
  <div class="col-4 float-left">
    <img src="./pics/burningFossil.jpg" alt="" class ="img-thumbnail rounded-circle pics" id = "pics-fossil">
  </div>
  <div class="col-8 float-right">
    Long Text
  </div>
</div>

推荐阅读