引导3列未按预期呈现
引导3列未按预期呈现
提问于 2019-08-24 17:05:26
我正在学习引导带来构建我自己的页面。这是片段。
HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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">
<link rel="stylesheet" href="custom.css">
<title>Title of the document</title>
</head>
<body>
<!-- container-fluid is taking of the padding towards the end, lets go with just the container. -->
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"><img id="photo" src="tom-cruise.jpg" alt="Pavan Dittakavi"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12">HELLO,
MY NAME IS KAMIL24YO AND THIS IS MY RESUME/CV</div>
</div>
<div id="seperator"></div>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
<div class="row">
<div class="my_header">
//EDUCATION
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<!-- -->
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME2
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
<!-- -->
</div>
</div>
</div>
</div>
</body>
</html>下面是CSS文件：
#photo {
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
border-radius: 50%;
border:3px solid #021a40;
}
#seperator {
border-top: double;
color: #ededed;
}
.my_header {
color: #EC7263;
font-size: 1.8em;
font-weight: 700;
text-transform: uppercase;
}
body {
font-family: 'Open Sans', Arial, Tahoma;
}
.shape{
text-align:left;
background-color:rgba(3,78,136,0.7);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:20px auto;
position:relative;
}我注意到的是-lg-7和col 5，或就这一点而言，col 2和col 10没有在Bootstrap中呈现为列。请让我知道我错过了什么-我有一种感觉，div排序或使用的行和容器是遗漏了什么。
顺便提一句，我还看到在Chrome上失真更多--列根本没有呈现，但是在Firefox上呈现某种程度--例如前几列。
编辑:我现在的问题是，我正试图为http://kamsolutions.pl/projects/resume/构建一个克隆，在我的实现中，我看到生成的HTML中有列和行混在一起，而不是按预期的那样呈现。这是我指的图片。
谢了帕文。
回答 1
Stack Overflow用户
发布于 2019-08-24 19:06:04
您有一行，其中有两列，col 7和col 5.在col 7中，您有另外两行，而在col 5中，您只有一行。这就是你的空白的来源。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57639973
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号