Bootstrap div高度设置会破坏网格

时间：2017-10-17 19:03:22

标签： html css twitter-bootstrap

我希望#intro div有90％的窗口高度。但是当我在css中设置它时会弄乱网格。当我最小化浏览器窗口＆＃34;关于我＆＃34;部分堆栈和封面＆＃34;我做什么＆＃34;部分和三个下部列。但是，当我从css everthing删除高度设置工作正常。有没有让row1 90％的高度而不是破坏响应？

这是我的代码与css：https://jsfiddle.net/yjakg7rL/ 

<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Test resume page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--Boostrap_css-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

  <!--Bootstrap_js-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  <!--custom CSS-->
  <link rel="stylesheet" type="text/css" href="style.css" >
  </head>

<body>

    <div id="intro" class="container-fluid">
        <div class="row row1">

            <div class="col-md-4 column1">
                <img src="dva.jpg" class="rounded-circle img-responsive dva" alt="Gamer-grill" width="200" height="200">
                <h3>Name/surname</h3>
                <p>MEKA pilot. Top trash tier web dev</p>
            </div>


            <div class="col-md-8 column2">
                <h3>About me</h3>
                <p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
            </div>

        </div>
    </div>      



    <div class="container-fluid">

            <h3>What I do?</h3>
            <p> I'm eating ults. Omnomnomnomn. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

    </div>

    <div class="row exp">

            <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
            </div>

            <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
            </div>

            <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
            </div>
    </div>


</body>
</html>

2 个答案:

答案 0 :(得分：0)

Bootstrap拥有自己的类和自己的集合大小，您需要修改CSS类以进行适当的更改。

查看文档： https://getbootstrap.com/docs/4.0/getting-started/introduction/

答案 1 :(得分：0)

为什么你需要100％的身高？我认为这就是打破你的代码。你的引导程序结构也不正确。看看下面的代码。

html, body {
	
	height: 100%;
}

#intro {
	
	height: 100%;
	
}

.row1 {
	
	height: inherit;

}

.column1 {
	
	background-color: #23af4b;
	
}

.column2 { 

	background-color: #eef2d0;
 	
}


.exp {
	
	background-color: #eef2d0
	
}


.dva {
	
	width: 200px;
	height: 200px;
	
}
<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Test resume page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!--Boostrap_css-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

  <!--Bootstrap_js-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  
  <!--custom CSS-->
  <link rel="stylesheet" type="text/css" href="style.css" >
  </head>
  
<body>

	<div id="intro" class="container-fluid">
		<div class="row row1">
			
			<div class="col-md-4 column1">
				<img src="dva.jpg" class="rounded-circle img-responsive dva" alt="Gamer-grill" width="200" height="200">
				<h3>Name/surname</h3>
				<p>MEKA pilot. Top trash tier web dev</p>
			</div>
			
			
			<div class="col-md-8 column2">
				<h3>About me</h3>
				<p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
			</div>
				
		</div>
	</div>		
		
	
		
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<h3>What I do?</h3>
				<p> I'm eating ults. Omnomnomnomn. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
			</div>
		</div>
			

		
	<div class="row exp">
			
			<div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
			</div>
			
			<div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
			</div>
			
			<div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
			</div>
	</div>
		
	</div>

	
</body>
</html>

相关问题
最新问题