我想在屏幕上显示三列文字，并且像一个jumbotron this。当我运行网站时，我只是在顶部获得一个jumbotron，然后是三行文本，每个文本占据页面宽度的100％。我如何获得bootstrap将div转换为合适的网格布局？我已经尝试将其他行放入内部，就像一些教程所说的那样，但它们都失败了。任何想法如何实现工作网格布局？
.jumbotron {
padding: 30px 10px;
background-color: #d8d8d8;
}<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem ipsum dolor sit.</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor.</h1>
<h3>Lorem ipsum dolor sit amet, consectetur.</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quas neque, alias repudiandae autem. Laudantium commodi ratione qui facere similique consequatur repudiandae, fugit odio incidunt soluta nihil dicta quasi animi, laboriosam fuga pariatur
possimus vel. Ex odit repellat commodi temporibus perspiciatis neque, iste, rem eaque, ipsum vel inventore sunt facere assumenda cum modi ea facilis quisquam adipisci sed nihil dolores nesciunt expedita. Magnam iusto ad a cupiditate corporis
provident at, asperiores eum aliquid adipisci soluta quidem debitis numquam. Vel fuga omnis ea, rem quidem voluptatibus inventore expedita repudiandae quaerat voluptatem, at autem tempore aperiam, suscipit consequatur similique aspernatur laudantium
consequuntur!
</p>
</div>
<div class="col-md-6">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores, dolore. Distinctio, quia, dolor dolore cumque veritatis consequatur perferendis aliquam soluta beatae aperiam odit praesentium animi omnis reprehenderit ullam ea deserunt
consequuntur totam. Aperiam debitis labore vero perferendis fuga in quas dolore, odio amet, incidunt, quidem natus eos blanditiis ad dolores fugiat minima ut iste ullam totam ducimus assumenda asperiores, voluptate vitae cumque? Inventore laboriosam
ducimus culpa tempore eligendi voluptatibus optio, placeat eum necessitatibus blanditiis rem voluptates ea illum beatae architecto minima, autem saepe quibusdam expedita dolorum. Maiores at deserunt laboriosam ab dolorum libero, suscipit ullam
veniam ipsum non minima, aperiam, commodi rerum! Magnam dignissimos magni optio porro minus, deserunt totam sequi, voluptas doloremque voluptatibus est, aperiam unde repellendus vel odit facere ipsam velit consequuntur praesentium cumque ea,
quisquam natus. Dicta reiciendis voluptas, facere placeat in fugit perspiciatis architecto totam harum ducimus quisquam nemo, sapiente natus praesentium esse nihil inventore distinctio minus molestiae possimus earum ea tenetur? A velit, dicta
eaque iste explicabo aliquid, aspernatur animi atque at totam voluptatum vel maxime voluptas error libero rerum quam voluptatem porro deleniti perferendis ab commodi vitae. Veniam ad, vero voluptatem exercitationem ex dolor voluptatum, aperiam
cupiditate dolore hic officiis quasi modi. Hic dolore temporibus, tenetur, obcaecati facere quos similique nesciunt amet tempora fugiat incidunt dolorem placeat minus totam recusandae laborum, cum exercitationem aliquid sunt fugit iure ab. Maxime,
itaque aliquid? Non repellendus unde id. Vel reiciendis omnis doloremque molestiae necessitatibus incidunt voluptatum eveniet repellat enim perspiciatis itaque at dolorem tempore alias error, repellendus nulla quia corrupti cupiditate. Obcaecati
delectus saepe error cumque ex, deleniti tenetur necessitatibus beatae at quis fugiat vitae natus laboriosam aperiam eveniet reiciendis ipsa repudiandae. Necessitatibus maiores unde eveniet aspernatur autem eligendi soluta non iure, molestiae
repudiandae quisquam, id quaerat sint. Autem at architecto eligendi aut voluptatem voluptatibus vitae accusantium quod assumenda consectetur libero eveniet recusandae, consequuntur repudiandae id suscipit unde nulla delectus eum sed, neque enim
ipsam. Optio nesciunt dolorum iure omnis aspernatur. Recusandae est aut sit delectus minima repellat nisi dolorem impedit velit deserunt optio magni, laboriosam accusamus facilis veritatis perspiciatis similique quia eius explicabo. Veniam odio
corporis rem nemo, sunt quod asperiores adipisci aut tempore architecto quo sapiente ex ad nisi et vitae amet deleniti corrupti, nesciunt doloribus unde repellat. Libero sint quod ab amet natus, non assumenda sit magnam, similique, itaque ratione
soluta nobis! Natus laborum nobis necessitatibus nihil veniam eveniet quos beatae repellendus saepe!
</h5>
</div>
<div class="col-md-3">
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum aperiam incidunt ducimus officia! Quos dolorem iure fugit eligendi a omnis totam modi molestias eaque natus, deleniti eum! Veniam accusamus laborum optio neque corporis ut obcaecati
saepe facilis, deserunt. Maiores perferendis architecto incidunt sequi nesciunt quia blanditiis a voluptatum nam nemo unde hic facere cumque ex pariatur dicta, culpa neque eum minus! Facere similique facilis dolor vitae adipisci molestias sapiente
eaque temporibus, libero quam, excepturi labore. Ratione deleniti id ut quo magni facilis optio repudiandae, sed. Minima itaque recusandae, doloremque minus sit veniam? Odio nesciunt vero reiciendis soluta possimus aspernatur totam autem magnam
blanditiis eos impedit animi veniam harum saepe aliquam, modi tenetur cum? Esse iusto similique, perspiciatis quod eum voluptatibus doloribus, labore asperiores tempore! Inventore deleniti eum minima nam corporis eius doloribus labore perferendis
a cum, enim molestiae odit cumque qui, distinctio. Ab fuga ipsa nostrum, doloribus aspernatur, quaerat, possimus quis corrupti ducimus ullam officia inventore. Itaque, iure, ut. Enim odit vel cupiditate accusamus aliquid recusandae consequatur
officia nesciunt, beatae nam. Culpa eos ratione aliquid dolorem nostrum minima, tenetur mollitia animi laboriosam at iusto placeat alias, officiis explicabo veniam inventore, doloremque odit. Doloribus et sint dolores. Rem consequuntur sed ratione!</h6>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</div>
</body>
</html>
答案 0 :(得分：0)
.container排在第一位。
然后是.row。
然后是.col列。
不要将Bootstrap容器放在一排。