如何在 Bootstrap 中嵌套网格

How to nest grids in Bootstrap

提问人:will 提问时间:11/17/2022 最后编辑:will 更新时间:11/17/2022 访问量:26

问:

我是 Bootstrap 的初学者,我正在尝试使用这种布局在 Bootstrap 中创建网格

我写了这个:

<div class=’container-fluid’></div>
    <div class="row">
        <div class="col-sm-3 bg-primary"><img src="images/about.jpg" class= "imageAboutPage" alt=""></div>
        
        <div class='col'>
            
            <div class=’row’>
        <div class="col bg-primary">Lorem ipsum dolor.</div>
        <div class="col bg-secondary">Lorem ipsum dolor.</div>
      </div>
      
    </div>

我得到的结果是这个布局

它们应该是一个完整的元素。我觉得我离得很近。也许我搞砸了行?提前致谢!

HTML CSS Twitter-Bootstrap 布局 嵌套

评论

0赞 rizaldodo 11/17/2022
这是你的整个代码吗?
0赞 will 11/17/2022
@rizaldodo我想我没有包括 Bootstrap 的导入,但就我试图解决的问题而言,是的,这就是我所有的代码。<!DOCTYPE html> <html lang="en">

答:

0赞 rizaldodo 11/17/2022 #1

这是我的解决方案,希望它有所帮助。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

    <div class="row">
      <div class="col-sm-3 bg-primary" style="height:200px"><img src="images/about.jpg" class= "imageAboutPage" alt=""></div>
      <div class="col">
          <div class="row bg-primary h-50">Lorem ipsum dolor.</div>
          <div class="row bg-secondary h-50">Lorem ipsum dolor.</div>
      </div>  
   </div>

评论

0赞 will 11/17/2022
我必须添加 to to 才能让它在我这边正确格式化并做出响应,但总的来说这很棒。谢谢一堆!h-75<div class="col-sm-3 bg-primary h-75" style="height:200px">