出于某种原因，当我在桌面上查看我的网页（正常窗口宽度）时，列似乎没问题。但是，当我调整窗口大小时，某些列往往比其他列更高。
代码:(请为奇怪的列调整窗口大小）
<!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>
答案 0 :(得分：0)
如果我理解正确，您有一个响应式网站，根据浏览器的大小调整大小，因此当浏览器窗口宽度减小时，列调整大小并且所有文本都保留，无处可去它向下扩展，导致该列中的文本/图像更长，更瘦。我没有看到任何东西＆＃34;怪异的＆＃34;除此之外。
我发现它会导致您的网站出现多处问题，我还没有处理任何完全响应的网站，但我建议您设置最小和最大宽度，最小宽度和最大宽度为CSS。
希望有所帮助！
答案 1 :(得分：0)
澄清一下，您是指“神奇网站”，“只是电子邮件或电话呼叫”等部分中的列不一致吗？
如果是这样 - 从它的外观来看，似乎你没有在<div class="row"></div>标签中包裹每列“行”。
要使Bootstrap的网格最佳地工作，请将每行列包装在“行”类中，如下所示（或在上下文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>