个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我是第一次尝试使用 Bootstrap，但在实现“col”标签时遇到了问题，因此它适合视口(viewport)允许的尽可能多的内容/行。下面是我的基本标记。
我相信我遵循的正确顺序是使用类为“container text-center”的 div/section 标签，然后是类为“col”的 div/class="row"标签和文章”。据我了解，如果“col”标签没有/没有设置列宽，它将尝试创建一行六列或尽可能多的列，具体取决于单词中的字符如何这些列将允许内容中断/显示/呈现。
我相信我所做的应该有效。我正在根据 enter link description here 中看到的 lynda 视频使用 Bootstrap v4 beta 0.6。
我希望有人能解释/指出我搞砸了的地方。我检查了 Stack Overflow 是否存在类似问题，虽然我发现了类似问题，但它们都与 col-size-# 相关，而不仅仅是“行”类本身。
<!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>
最佳答案
关于html - Bootstrap 'col' 标签不会将文章拉入尽可能多的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43614387/
27
4
0
我知道在 KDB 中，如果您有一个列表，例如... l:`apples`oranges`pears` 您可以像下面这样进行 N 次随机选择: 9?l 但是如何尽可能均匀地选择列表中的每个项目？ 最佳答
我真的厌倦了它。我有一个高级 Web 应用程序依赖于大量 Javascript 库(jQuery、jQueryUI、OpenLayers、highcharts、EJSChart 等等)。不用说，Int
我是一名优秀的程序员,十分优秀！