如何解决Bootstrap，Grid System和Flexbox列-两种相互竞争的布局以及每种布局的效果
我从两个不同的方向着手进行布局；我不确定结果为何如此。 （a。）一行，三列和四个元素。一列中有两个元素 （b。）一行，然后是嵌入式行。四列和四个元素（每个元素都有一个列）。
a。我可以将内容从第一列的左侧移至右侧。我已经使用过（例如justify-content-end- ，align-items-，右浮动等）。没事。甚至有可能。
b。这种布局有效（我的目标是使第1列和第2列彼此接近；但是，另一个问题出现了。为什么第2列中的lorem insum文本在最后一列之前的卡之前停下来。文本在卡下流动，因为它们在不同的行上-这是为什么。
a-页面示例
b-第二个选项的页面示例
选项b
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!--
************************************************
This is the activity solution
************************************************
-->
</head>
<body>
<!-- Start Nav -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<span class="navbar-brand mb-1 h1">Navbar</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- End Nav -->
<div class="container">
<div class="row">
<div class="col-md-8 justify-content-right">
<div class="page-header">
<h1>About Me</h1>
</div>
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/150x150" alt="Placeholder" class="img-thumbnail">
</div>
<div class="col-md-9">
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque dignissim,felis ut dictum tristique,nibh erat feugiat libero,sit amet fringilla mauris velit in mi. Duis tempus felis vitae
felis vulputate pretium. Nullam commodo,est ac auctor ornare,eros nisi fringilla sem,non pulvinar tortor lorem sit amet sem. Aenean quis erat facilisis,porttitor ex cursus,luctus enim. Curabitur et metus in lacus tristique sagittis et in lorem. Nunc id nisi et
neque fringilla ultricies. Aenean at feugiat elit,a posuere justo. Pellentesque egestas
dolor et nisi venenatis,nec fermentum urna fringilla. Etiam efficitur porta purus,id
posuere sem congue a.
</p>
</div>
</div>
</div>
<!--Create Card taking up 4 Columns-->
<div class="col-md-4">
<div class="card mt-2">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Bootstrap JavaScript CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>About Me 2</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
.bx {
background-color: grey;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-color: red;
margin-right: 0px;
}
.push {
grid-column: 1 / span 2
}
.row_one {
background-color: blue;
height: 50px;
}
/*
I'm able to center the text (100 X 100) by using "display: flex;" */
</style>
</head>
<body>
<!-- -->
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light"> -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>About Me</h1>
<div class="bx"> 100 x 100</div>
</div>
<div class="col-md-4">
<br><br>
<div class="push">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti inventore enim eligendi in voluptatem voluptate asperiores alias minima laborum. Accusamus quaerat recusandae quos voluptas sed dolores alias autem molestias ipsam!
Iste,ex,vel reprehenderit temporibus exercitationem expedita asperiores incidunt aspernatur amet iure saepe. Quaerat accusamus laborum doloremque,ipsam autem,dolor sunt corrupti eveniet possimus,optio consequuntur id molestias. Accusamus,perferendis.
Ad voluptatum mollitia sed eum provident doloremque,consectetur nesciunt quod voluptatem laudantium in sequi consequuntur vero,recusandae,at veritatis quos ex perspiciatis assumenda sunt aspernatur. Voluptates asperiores culpa dolor eligendi!
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。