Bootstrap 3 列未按预期呈现答案

【问题标题】：Bootstrap 3 Columns Not Getting Rendered as expectedBootstrap 3 列未按预期呈现
【发布时间】：2019-08-25 03:06:04
【问题描述】：

我正在学习引导程序来构建自己的页面。这是sn-p。

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;
}

我注意到 col-lg-7 和 col-lg-5 或就此而言 col-lg-2 和 col-lg-10 在 Bootstrap 中没有呈现为列。您能否让我知道我在哪里丢失了 - 我感觉 div 排序或行和容器的使用丢失了一些东西。

作为旁注，我还看到，在 Chrome 上失真更多 - 列根本没有被呈现，但在 Firefox 上它在一定程度上呈现 - 例如前几列。

编辑：我现在的问题是我正在尝试为http://kamsolutions.pl/projects/resume/ 构建一个克隆，在我的实现中，我看到生成的 HTML 文件的列和行混合在一起，并且没有按预期呈现。这是我指的图片。

谢谢，帕万。

【问题讨论】：

在 Bootstrap 中未呈现为列--意味着??
您的代码给出了正确的结果。你到底想要什么？

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您有一行，其中有两列 col-lg-7 和 col-lg-5。在 col-lg-7 中，您有另外两行，而在 col-lg-5 中，您只有一行。这就是你的空白的来源。

【讨论】：