这就是我所说的。 https://skullscream.github.io/tributepage/
当它col-lg时，它会很好地对齐，但当你将它完全缩小到col-xs和col-sm＆＃34;传记＆＃34;段落与其他段落并不一致。有人可以向我解释为什么会这样吗？我宁愿得到解释而不是解决方案：）
HTML
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
background-color: white;
font-size: 16px;
}
/* Section 1 */
.heading-pictures {
margin-top: 2%;
}
#top-picture {
margin-bottom: -4%;
}
.paragraph {
background-color: #95a5a6;
padding: 2%;
color: white;
text-align: justify;
}
.title {
position: absolute;
color: #6c7878;
}
.hd1 {
font-size: 5.25em;
}
.hd1,
.hd2 {
text-align: center;
padding-top: 15%;
line-height: 1;
}
.hd2 {
padding-top: 5%;
border-top: 1px solid #6c7878;
}
.section1 {
position: relative;
}
div.paragraph-quote {
margin-bottom: 4%;
background-color: rgba(0, 0, 0, 0)
}
hr.style-one {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
/* Section 2 */
.inventions {
width: 100%;
}
.images {
margin-top: 2%;
}
.section2 p {
text-align: center;
font-size: 2.5em;
color: #6c7878;
padding-top: 2%;
}
.section2 div {
padding-bottom: 2%;
}
.tesla-patents p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}
.tesla-patents p span a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
.tesla-patents p span a:hover,
.tesla-patents p span a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
/* Section 3 */
.bio-heading {
font-size: 2.5em;
color: #6c7878;
padding: 0;
text-align: center;
margin-top: 1%;
margin-bottom: 3%;
}
#detailed-bio p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}
#detailed-bio p a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
#detailed-bio p a:hover,
#detailed-bio p a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
footer {
font-size: .7em;
margin-bottom: 1%;
text-align: center;
}
#detailed-bio {
margin: 0 1% 0 1%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Nikola Tesla, Engineer and Inventor</title>
<link href="tribute.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<head>
<title>Nikola Tesla, Engineer and Inventor</title>
</head>
<body>
<div class="container-fluid">
<!-- Section 1 -->
<div class="row">
<div class="section1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12"><p class="hd1">Nikola Tesla</p><p class="hd2">Inventor and Engineer</p></div>
<div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
<img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
</div>
<div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
<p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." - Nikola Tesla</p>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 2 -->
<div class="row">
<div class="section2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>What is Nikola Tesla known for?</p>
<div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
<img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg">
</div>
<div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
<img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
</div>
<div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
<img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
</div>
<div class="tesla-patents col-lg-12 col-md-12 col-sm-11 col-xs-12">
<p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 3 -->
<div class="row">
<div class="bio-section col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="bio-heading">Biography</p>
<div id="detailed-bio">
<p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p>
</div>
</div>
</div>
<hr class="style-one">
<footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>
</body>
</html>
答案 0 :(得分：2)
这是因为您正在使用引导程序语法（部分）。
使用列替换列和行时。您当前正在列中嵌入列。
container
| row
| | column
| | | row
| | | | column
| | | | column
| | | row
| | | | column
| | | | column
| | column
这也可能对您有所帮助： Bootstrap Guidelines
删除#detailed-bio上的边距并调整代码如下：
<div class="container-fluid">
<!-- Section 1 -->
<div class="row">
<div class="section1 col-xs-12">
<div class="row">
<div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
<p class="hd1">Nikola Tesla</p>
<p class="hd2">Inventor and Engineer</p>
</div>
<div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
<img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
</div>
<div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
<p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." - Nikola Tesla</p>
</div>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 2 -->
<div class="row">
<div class="section2 col-xs-12">
<div class="row">
<div class="col-xs-12">
<p>What is Nikola Tesla known for?</p>
</div>
<div class="images col-lg-4 col-xs-12">
<img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg">
</div>
<div class="images col-lg-4 col-xs-12">
<img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
</div>
<div class="images col-lg-4 col-xs-12">
<img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
</div>
<div class="tesla-patents col-xs-12">
<p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
</div>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 3 -->
<div class="row">
<div class="bio-section col-xs-12">
<p class="bio-heading">Biography</p>
<div id="detailed-bio">
<p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p>
</div>
</div>
</div>
<hr class="style-one">
<footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>
（删除了不必要的bootstrap类）
答案 1 :(得分：1)
编辑此div
<div id="detailed-bio">
<p></p>
</div>
要
<div id="detailed-bio" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p></p>
</div>
答案 2 :(得分：0)
将详细生物div的margin-margin和margin-right增加到2％。如下所示
#detailed-bio {
margin: 0 2% 0 2%;
}