Question

我正在学习引导带以构建自己的页面。这是代码段。

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文件中的行和列混合在一起，无法按预期方式呈现。这是我指的图片。

谢谢，帕万。

Answer 1

您有一排，其中有两列col-lg-7和col-lg-5。在col-lg-7内您还有另外两行，而在col-lg-5内您只有一行。那就是你的空白来自哪里。

Bootstrap 3列未按预期呈现

1 个答案: