Bootstrap 'col'标签不会将文章拉到尽可能多的行中-Java 学习之路

我第一次尝试使用Bootstrap并且在实现'col'标记时遇到问题，以便它适合视口允许的内容/行数 . 以下是我的基本标记 .

我相信我遵循正确的顺序，使用div / section标签，类为“容器文本中心”，然后是div / class =“row”标签，然后是一个类别为“col”的文章 . 我的理解是，如果“col”标签没有/没有设置列宽，那么它将尝试创建一列六列或尽可能多的列，这取决于单词中字符的字符如何列将允许内容中断/显示/呈现 .

我相信我所做的应该是有效的 . 我正在按照enter link description here中的lynda视频使用Bootstrap v4 beta 0.6

我希望有人可以解释/指出我在哪里搞砸了 . 我已经检查了Stack Overflow的类似问题，虽然我发现了类似的问题，但他们都说的是col-size-＃而不仅仅是'row'类本身 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Bootstrap</title>
</head>
<body>

<style>
    img {
        width: 100px;
        display: block;
    }
</style>

<header class="clearfix" style="height: 50vh; background: url(images/background.jpg) no-repeat center center; background-size: cover; margin-bottom: 20px;">


        <!-- container and or container-fluid -->
        <div class="container-fluid"><img src="images/wisdompetlogo.svg" alt="Wisdom Pet Logo"></div>
</header>

<section class="container text-center" id="services">
    <row>
        <article class="col">
            <img class="mx-auto" src="images/icon-exoticpets.svg" alt="Icon">
            <h3>Exotic Pets</h3>
            <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
        </article>

        <article class="col">
            <img class="mx-auto" src="images/icon-grooming.svg" alt="Icon">
            <h3>Grooming</h3>
            <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
        </article>

        <article class="col">
            <img class="mx-auto" src="images/icon-health.svg" alt="Icon">
            <h3>General Health</h3>
            <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
        </article>

        <article class="col">
            <img class="mx-auto" src="images/icon-nutrition.svg" alt="Icon">
            <h3>Nutrition</h3>
            <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
        </article>

        <article class="col">
            <img class="mx-auto" src="images/icon-pestcontrol.svg" alt="Icon">
            <h3>Pest Control</h3>
            <p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p>
        </article>

        <article class="col">
            <img class="mx-auto" src="images/icon-vaccinations.svg" alt="Icon">
            <h3>Vaccinations</h3>
            <p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p>
        </article>
    </row>
</section>

</div><!-- content container -->

<script src="js/jquery.slim.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

2 回答

0
需要进行一些小的修正，以确保达到您想要的效果 .
- 将 <row> 元素更改为 <div class="row">
- 确保加载正确版本的bootstrap
你可以在这里看到bootply
回复于 2024-04-27T00:44:23+08:00
0
bootstrap的宽度是12（它使用网格） . 所以，如果你想要6篇文章，你必须这样做：
```
<article class="col-lg-2">
```
（有6篇文章，你有12篇）

你可以在这里了解更多：https://getbootstrap.com/examples/grid/
回复于 2024-04-27T00:44:23+08:00

Bootstrap 'col'标签不会将文章拉到尽可能多的行中

2 回答

相关问题