Question

我创建了一个容器，其中一行有3列但我根本没有得到3列我只得到一个包含所有内容的长列。知道为什么吗？我正在使用Bootstrap 4。

<?php require_once($_SERVER['DOCUMENT_ROOT'].'/core/config.php'); // Define DIR atc ?>
    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php if(isset($title)){ echo $title; }?></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    </head>
    <body>   
     <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3"><?php include(DIR .'includes/ads.php');?></div>
            <div class="col-lg-5"><?php include(DIR .'includes/article.php');?></div>
            <div class="col-lg-4 d-flex flex-column"><?php include(DIR .'includes/sidebar.php');?></div>
            </div>
        </div>
    </body>
    </html>

Answer 1

嗯，您使用了lg类 - 这些类适用于大型显示器。将它装在一台大显示器上，然后你会看到三个相邻的。

如果你让窗户变窄，它们会低于对方 - 这就是Bootstrap的响应度;

要在较小的屏幕上获得3列，请使用常规类，例如col-5，col-4等。而且 - 这是Bootstrap的最大优势 - 您还可以组合使用同一元素中不同大小的几个类，如<div class="col-6 col-lg-3">，这将导致小型监视器上各有2列，或大型监视器上各4列。

在这个codepen中，我将您的代码置于顶部，然后使用常规col- - 类复制它一次：

https://codepen.io/anon/pen/qxRXPK

Answer 2

添加col-sm和col-md css类以更具体地针对不同的显示分辨率

Html Bootstrap4 - 三列

2 个答案: