使用 Bootstrap & HTML 进行列调整
column adjustments using Bootstrap & HTML
出于某种原因，当我在桌面上查看我的网页时（正常 window 宽度），列似乎没问题。但是，当我调整 window 大小时，某些列往往高于其他列。
代码：（请调整 window 对于奇怪的列）
<!DOCTYPE html>
<html>
<head>
<title>Propel WD</title>
<link rel="shortcut icon" href="/Users/Ryan/Downloads/LAPTOP3.JPG">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/animations.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.opacityChange {
position: relative;
-webkit-animation: myfirst 1s linear 0s 1 alternate; /* Chrome, Safari, Opera */
animation: myfirst 1s linear 0s 1 alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
/* Standard syntax */
@keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
.module {
background: white;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
/*animation: widen 10s linear alternate infinite;*/
}
.stripe-1 {
color: white;
background: repeating-linear-gradient(
45deg,
#ED6B61,
#ED6B61 10px,
#F44336 10px,
#F44336 20px
);
}
hr {
height: 0.1px;
background-color: gainsboro;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" class="text-center" style="margin: 40px; font-family: Lato;">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #F44336; border-bottom: none;">
<div class="container">
<div class="navbar-header" style="color: white;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><div style="color: white; font-size: 16px;">Propel WD <span class="glyphicon glyphicon-circle-arrow-up"></span></div></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><div style="color: white; font-size: 13px;"><span class="glyphicon glyphicon-home"></span></div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EAbout.html"><div style="color: white; font-size: 13px;">ABOUT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EServices.html"><div style="color: white; font-size: 13px;">SERVICES</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EPricing.html"><div style="color: white; font-size: 13px;">PRICING</div></a></li>
<li><a href=""file://localhost/Applications/propelOMS%3EOI.html"><div style="color: white; font-size: 13px;">QUESTIONS</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EContact.html"><div style="color: white; font-size: 13px;">CONTACT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3ETC.html" onclick="window.open('file://localhost/Applications/propelOMS%3ETC.html', 'newwindow', 'width=400, height='); return false;"><div style="color: white; font-size: 13px;">TERMS</div></a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center" style="margin-left: -40px; margin-right: -40px; color: white; background-color: #F44336;">
<h1>Propel Web Design <span class="glyphicon glyphicon-circle-arrow-up"></span></h1>
<h3>Where websites matter</h3>
</div>
<hr>
<h2 class="stripe-1" style="padding-top: 30px; padding-bottom: 30px; margin-right: 25%; margin-left: 25%;">Why Choose Us?</h2>
<hr>
<article id="wcu" class="opacityChange">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; padding: 40px;">
<h3 style="letter-spacing: 1px;">
Here at Propel Web Design, we love to make stylish and fancy websites. For prices
as low as £300, we could make a masterpiece! We also have a huge variety
of types of websites! Business websites, Information websites and much more!
Our websites all have SEO, Responsive Design, 10 free stock images. Go ahead!
Make a website with us!
</h3>
</div>
</div>
<hr>
<div class="container">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
<div class="col-sm-4">
<span class="glyphicon glyphicon-gift" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-star" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">AMAZING WEBSITES</h4>
<br>
<p style="font-size: 15px;">
Our brochure websites are made for small companies who want to get
themselves online. We will try to make your website look professional and
adequate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-phone" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-envelope" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">JUST AN EMAIL OR TELEPHONE CALL AWAY</h4>
<br>
<p style="font-size: 15px;" class="ni">
Our blogs are made for people who want to share their day to day life with
the world. We will try to make your website fancy and as personalised as
possible.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-briefcase" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-wrench" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">HARD WORKING</h4>
<br>
<p style="font-size: 15px;">
Our personal websites are for people who want to talk about the recent
trends and other controversial things. We will try to make your website
look clean and well laid out.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-certificate" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">PASSIONATE</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-gbp" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-credit-card" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">AFFORDABLE</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-th" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-sort-by-alphabet" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">ALL YOU NEED</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-signal" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">SEO</h4>
<br>
<p style="font-size: 15px;">
All of our packages include SEO, Search Engine Optimisation. We've got
SEO on the top three browsers in the world. Bing, Yahoo and Google.
This will be useful when it comes to attracting more customers since
people will be able to view your website on any browser!
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-user" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">DOMAIN NAMES</h4>
<br>
<p style="font-size: 15px;" class="ni">
Although our domain names are hosted by 3rd party hosters, we've chosen
the #1 website hosting service in the UK, GoDaddy. We've got a wide
variety of domain names like .com, .uk, .co.uk., .site and many more.
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">HD STOCK IMAGES</h4>
<br>
<p style="font-size: 15px;">
Our HD Stock Images come from Adobe Stock Images. Their library has over
44 million photos so you could be picky with the size and content of the
image. You know what they say! Pictures are worth a thousand words!
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">RESPONSIVE DESIGN</h4>
<br>
<p style="font-size: 15px;">
All of our websites are 100% responsive so that users will also be able
to see your websites no matter how big or small their screen is! From a
IPhone to an IMac, you'll still get to view it.
</p>
</div>
</div>
</div>
</div>
<hr>
</article>
</body>
</html>
如果我没理解错的话，你有一个响应式网站，它会根据浏览器的大小调整大小，因此当浏览器 window 宽度减小时，列会调整大小，所有文本都会保留并且由于无处可去，它向下扩展，导致该列中的 text/images 变得更长更细。除此之外，我什么都没看到"weird"。
我发现它会导致您的网站出现多个问题，我还没有处理过任何完全响应式的网站，但我建议您设置最小和最大宽度，最小宽度和最大宽度在CSS.
希望对您有所帮助！
澄清一下，您指的是 "Amazing Websites"、"Just an E-Mail or Telephone Call Away" 等部分中的列不一致吗？
如果是这样——从外观上看，您似乎没有将每个 "row" 列包装在 <div class="row"></div> 标签中。
为了使 Bootstrap 的网格以最佳方式工作，将每行列包装在 "row" class 中，就像这样（或在您的上下文中查看此解决方案 on JSFiddle):
<style>
.box {
margin-top: 20px;
padding: 15px;
border: 2px solid grey;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 box">
<h2>1st Row, 1st Column</h2>
</div>
<div class="col-sm-4 box">
<h2>1st Row, 2nd Column</h2>
</div>
<div class="col-sm-4 box">
<h2>1st Row, 3rd Column</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4 box">
<h2>2nd, 1st Column</h2>
</div>
<div class="col-sm-4 box">
<h2>2nd Row, 2nd Column</h2>
</div>
<div class="col-sm-4 box">
<h2>2nd Row, 3rd Column</h2>
</div>
</div>
</div>
出于某种原因，当我在桌面上查看我的网页时（正常 window 宽度），列似乎没问题。但是，当我调整 window 大小时，某些列往往高于其他列。
代码：（请调整 window 对于奇怪的列）
<!DOCTYPE html>
<html>
<head>
<title>Propel WD</title>
<link rel="shortcut icon" href="/Users/Ryan/Downloads/LAPTOP3.JPG">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/animations.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.opacityChange {
position: relative;
-webkit-animation: myfirst 1s linear 0s 1 alternate; /* Chrome, Safari, Opera */
animation: myfirst 1s linear 0s 1 alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
/* Standard syntax */
@keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
.module {
background: white;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
/*animation: widen 10s linear alternate infinite;*/
}
.stripe-1 {
color: white;
background: repeating-linear-gradient(
45deg,
#ED6B61,
#ED6B61 10px,
#F44336 10px,
#F44336 20px
);
}
hr {
height: 0.1px;
background-color: gainsboro;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" class="text-center" style="margin: 40px; font-family: Lato;">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #F44336; border-bottom: none;">
<div class="container">
<div class="navbar-header" style="color: white;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><div style="color: white; font-size: 16px;">Propel WD <span class="glyphicon glyphicon-circle-arrow-up"></span></div></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><div style="color: white; font-size: 13px;"><span class="glyphicon glyphicon-home"></span></div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EAbout.html"><div style="color: white; font-size: 13px;">ABOUT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EServices.html"><div style="color: white; font-size: 13px;">SERVICES</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EPricing.html"><div style="color: white; font-size: 13px;">PRICING</div></a></li>
<li><a href=""file://localhost/Applications/propelOMS%3EOI.html"><div style="color: white; font-size: 13px;">QUESTIONS</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EContact.html"><div style="color: white; font-size: 13px;">CONTACT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3ETC.html" onclick="window.open('file://localhost/Applications/propelOMS%3ETC.html', 'newwindow', 'width=400, height='); return false;"><div style="color: white; font-size: 13px;">TERMS</div></a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center" style="margin-left: -40px; margin-right: -40px; color: white; background-color: #F44336;">
<h1>Propel Web Design <span class="glyphicon glyphicon-circle-arrow-up"></span></h1>
<h3>Where websites matter</h3>
</div>
<hr>
<h2 class="stripe-1" style="padding-top: 30px; padding-bottom: 30px; margin-right: 25%; margin-left: 25%;">Why Choose Us?</h2>
<hr>
<article id="wcu" class="opacityChange">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; padding: 40px;">
<h3 style="letter-spacing: 1px;">
Here at Propel Web Design, we love to make stylish and fancy websites. For prices
as low as £300, we could make a masterpiece! We also have a huge variety
of types of websites! Business websites, Information websites and much more!
Our websites all have SEO, Responsive Design, 10 free stock images. Go ahead!
Make a website with us!
</h3>
</div>
</div>
<hr>
<div class="container">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
<div class="col-sm-4">
<span class="glyphicon glyphicon-gift" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-star" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">AMAZING WEBSITES</h4>
<br>
<p style="font-size: 15px;">
Our brochure websites are made for small companies who want to get
themselves online. We will try to make your website look professional and
adequate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-phone" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-envelope" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">JUST AN EMAIL OR TELEPHONE CALL AWAY</h4>
<br>
<p style="font-size: 15px;" class="ni">
Our blogs are made for people who want to share their day to day life with
the world. We will try to make your website fancy and as personalised as
possible.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-briefcase" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-wrench" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">HARD WORKING</h4>
<br>
<p style="font-size: 15px;">
Our personal websites are for people who want to talk about the recent
trends and other controversial things. We will try to make your website
look clean and well laid out.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-certificate" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">PASSIONATE</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-gbp" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-credit-card" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">AFFORDABLE</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-th" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-sort-by-alphabet" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">ALL YOU NEED</h4>
<br>
<p style="font-size: 15px;">
Our informational websites are for those who want to teach others online
and share their passions and interests. We will try to make your website
fun and easy to navigate.
</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="module">
<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock" style="font-size: 50px;"></span>
<span class="glyphicon glyphicon-signal" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">SEO</h4>
<br>
<p style="font-size: 15px;">
All of our packages include SEO, Search Engine Optimisation. We've got
SEO on the top three browsers in the world. Bing, Yahoo and Google.
This will be useful when it comes to attracting more customers since
people will be able to view your website on any browser!
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-user" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">DOMAIN NAMES</h4>
<br>
<p style="font-size: 15px;" class="ni">
Although our domain names are hosted by 3rd party hosters, we've chosen
the #1 website hosting service in the UK, GoDaddy. We've got a wide
variety of domain names like .com, .uk, .co.uk., .site and many more.
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">HD STOCK IMAGES</h4>
<br>
<p style="font-size: 15px;">
Our HD Stock Images come from Adobe Stock Images. Their library has over
44 million photos so you could be picky with the size and content of the
image. You know what they say! Pictures are worth a thousand words!
</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
<h4 style="font-size: 19px;">RESPONSIVE DESIGN</h4>
<br>
<p style="font-size: 15px;">
All of our websites are 100% responsive so that users will also be able
to see your websites no matter how big or small their screen is! From a
IPhone to an IMac, you'll still get to view it.
</p>
</div>
</div>
</div>
</div>
<hr>
</article>
</body>
</html>
如果我没理解错的话，你有一个响应式网站，它会根据浏览器的大小调整大小，因此当浏览器 window 宽度减小时，列会调整大小，所有文本都会保留并且由于无处可去，它向下扩展，导致该列中的 text/images 变得更长更细。除此之外，我什么都没看到"weird"。
我发现它会导致您的网站出现多个问题，我还没有处理过任何完全响应式的网站，但我建议您设置最小和最大宽度，最小宽度和最大宽度在CSS.
希望对您有所帮助！
澄清一下，您指的是 "Amazing Websites"、"Just an E-Mail or Telephone Call Away" 等部分中的列不一致吗？
如果是这样——从外观上看，您似乎没有将每个 "row" 列包装在 <div class="row"></div> 标签中。
为了使 Bootstrap 的网格以最佳方式工作，将每行列包装在 "row" class 中，就像这样（或在您的上下文中查看此解决方案 on JSFiddle):
<style>
.box {
margin-top: 20px;
padding: 15px;
border: 2px solid grey;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 box">
<h2>1st Row, 1st Column</h2>
</div>
<div class="col-sm-4 box">
<h2>1st Row, 2nd Column</h2>
</div>
<div class="col-sm-4 box">
<h2>1st Row, 3rd Column</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4 box">
<h2>2nd, 1st Column</h2>
</div>
<div class="col-sm-4 box">
<h2>2nd Row, 2nd Column</h2>
</div>
<div class="col-sm-4 box">
<h2>2nd Row, 3rd Column</h2>
</div>
</div>
</div>