左边两个div，还有一个人
左边两个div，还有一个人
提问于 2020-07-29 10:11:10
我试图在左边构建一个布局2的div，在右边构建一个独立的div，但是我得到了垂直的3个div。我目前使用的是bootstrap 3.3.7，如何实现此目的？layout
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row d-md-block">
<div class="col-9 border float-left" style="background-color: red">
1 of 3
</div>
<div class="col-3 border taller float-right" style="background-color: blue">
2 of 3
</div>
<div class="col-12 col-md-9 border" style="background-color: green">
3 of 3
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2020-07-29 10:21:19
首先，创建两列col-6类。这将把屏幕分成两列。接下来，在第一列中添加一个row，并在该行中添加两个col-12列。这将使列看起来像您想要的那样。使用以下代码：
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
1 of 3
</div>
<div class="col-12">
3 of 3
</div>
</div>
</div>
<div class="col-6">
<div class="col-12" style="margin-left: -1rem">
2 of 3
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63145328
复制相关文章
相似问题
腾讯云开发者
