Question

div中的文本不在外面，我不知道如何解决。我尝试过按照以下代码中所示的顺序排列列的方法：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About us</title>
    <!-- versioning can often help (href="css/style.css?ver=2.0") -->
    <!-- BOOTSTRAP 4 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <style>
    body {
        background-color: #696969;
        margin-top: 100px;
    }
    .well {
        background-color: #deedee;
        margin: 3px;
    }
    </style>
 </head>
 <body>


<div class="container-fluid text-center">
   <div class="row">
        <div class="col-md-7">
            <div class="row">
               <div class="col-md-12">
                   <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
               </div>
           </div>
           <div class="row">
               <div class="col-md-12">
                   <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
               </div>
            </div>
           <div class="row">
               <div class="col-md-12">
                   <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, molestiae saepe! Facilis quidem dolorem temporibus mollitia doloremque, possimus voluptas error aperiam iusto repellendus numquam, laudantium nemo a, debitis nam eveniet repellat rem voluptates culpa iure nisi quae asperiores nulla molestiae consequatur. Facilis quos soluta necessitatibus, excepturi libero. Veritatis impedit expedita architecto assumenda quo cum earum reprehenderit ad reiciendis, explicabo consequatur, iste facilis vel esse nesciunt nihil animi minima eum accusantium eveniet nam. Dolor quas voluptates, officiis numquam corporis quos. Doloribus nisi maiores placeat quas minima, autem numquam natus totam quidem nostrum, quos vel illo magnam blanditiis quam eligendi sed voluptates.</div>
               </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="well m-0">
               <div class="row">
                   <div class="col-md-7">
                       Jan Kustra
                       <br>
                       <br>
                       <br>
                       <br>
                       <br>
                       <br>
                   </div>
                   <div class="col-md-5">
                       <img src="img/300.png" alt="my face" width="50%" class="float-right">
                   </div>
               </div>
               <div class="row">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni similique, suscipit laudantium, error explicabo repellat aperiam, ullam ab non exercitationem vitae, totam quidem eaque labore. Totam neque eaque architecto facilis, unde laudantium quas. Id vel, unde error, fugiat vero ipsa dicta doloribus mollitia ea et eaque incidunt esse. Aliquid ipsa perspiciatis reiciendis, eligendi dolorum architecto, voluptatum, consectetur similique ex quo ad nam, itaque officiis id porro ducimus doloremque reprehenderit. Inventore vel rem voluptatem ullam ab itaque harum rerum, ut hic modi facilis minus quibusdam, veniam quam ipsum. At maiores tenetur, natus illo repudiandae velit, similique harum accusantium voluptatum, quia quas!</p>
               </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Answer 1

您缺少文本块周围的列。

您的用户：

<div class="row">
   <p>Lorem ipsum...</p>
</div>

正确：

<div class="row">
   <div class="col-md-12">
      <p>Lorem ipsum...</p>
   </div>
</div>

Bootstrap 4.2.1，文本出现在div之外

1 个答案: