在 Bootstrap 中对齐段落答案

【问题标题】：align paragraph in Bootstrap在 Bootstrap 中对齐段落
【发布时间】：2019-12-23 20:16:54
【问题描述】：

我想将我的段落对齐在同一水平线上，但我找不到我的错误你有解决办法吗？

foreach ($articles as $article): ?> 
  <div class="container" id="presentation">
    <div class="row">
      <div class="col-12 mb-4"></div>
      <div class="col-12 col-md-6">
        <div class="media my-3">
          <span><i class="fas fa-check"></i></span>
          <div class="media-body ml-3">
            <h5 class="mt-0"><?= $article['name'] ?></h5>
            <p class="text-justify"><?= $article['content'] ?></p>
          </div>
        </div>
      </div>
    </div>
<?php endforeach ?>

【问题讨论】：

请把问题标记为正确，如果它回答了你的问题。
您似乎遇到了字符编码问题。确保您的 HTML 具有 utf-8 元标记，确保您的数据库、表和列是 utf-8，确保您的 IDE 打开并将文件保存为 UTF-8

标签： php html css bootstrap-4

【解决方案1】：

.col-12 {width: 100%;}

这意味着 col-12 将在一行中占据整个 div 块。尝试将其更改为 .col-6

工作演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container" id="presentation">
         <div class="row">
            <?php
               $articles=array(array("name"=>"name1111","content"=>"content1111"),array("name"=>"name222","content"=>"content222222"),array("name"=>"name333333","content"=>"content333333"));
               foreach ($articles as $article): ?> 
                <div class="col-md-6">
                   <div class="media my-3">
                      <span> <i class="fas fa-check"></i></span>
                      <div class="media-body ml-3">
                         <h5 class="mt-0"><?= $article['name'] ?></h5>
                         <p class="text-justify"><?= $article['content'] ?></p>
                      </div>
                   </div>
                </div>
          <?php endforeach ?>
           </div>
         </div>
   </body>
</html>

【讨论】：