对于在Bootstrap网格和clearfix中“浮动”的内容意味着什么。我的错误印象是，如果我的col- {viewport size} - *有意义，那么一切都会或多或少地落到实处。我错了。
我在下面的标记中，我有一系列缩略图，其中包含用于xs，sm，md和lg屏幕的Bootstrap类设置。在屏幕宽度<= 1190px时，我获得一行三个图像，接着是“Game of Fifteen”的一行，以及一行三个图像。在“Game of Fifteen”上面添加clearfix标签会将问题修复为此大小，但随着视口变小，“Finder”图像也会发生同样的情况。 Clearfix解决了第二个问题。我如何解决这个问题，以便显示所有内容，因为我的col-类名称表示我想要呈现它？
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Links -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.navbar, .about, .contact {
background-color: #003399;
color: white;
}
.navbar-default .navbar-brand {
color: white;
font-size: 25px;
}
.nav.navbar-nav.navbar-right li a {
color: white;
font-size: 20px;
}
#chicago-pic {
margin: 20px 0px 0px 0px;
}
ul {
padding: 10px 0px 0px 0px;
font-size: 20px;
}
img {
max-height: 200px;
}
.portfolio {
background-color: #808080;
color: white;
}
.form-control {
margin: 5px 0px 0px 0px;
}
.control-label {
margin: 10px 0px 0px 0px;
}
.thumbnail {
margin: 5px 5px 5px 5px;
}
button {
margin: 5px 0px 0px 0px;
}
#copyright {
margin: 20px 0px 0px 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-static-top">
<a class="navbar-brand" href="#">Coder</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about-section">About</a></li>
<li><a href="#portfolio-section">Portfolio</a></li>
<li><a href="#contact-section">Contact</a></li>
</ul>
</div> <!-- container-fluid -->
</nav> <!-- navbar-default-->
<div class="container-fluid">
<div class="about row">
<a href="#" name="about-section"></a>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<h1>About</h1>
<h2>Stuff</h2>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<ul id="skills-left" class="skills">
<li>Back-End Development (Flask)</li>
<li>Database Design and Implementation (PostgreSQL)</li>
<li>Agile Development</li>
</ul> <!-- skills left -->
</div> <!-- col-md-6 -->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<ul id="skills-right" class="skills">
<li>Python</li>
<li>Javascript/jQuery</li>
<li>SQL</li>
<li>C</li>
</ul> <!-- skills right -->
</div> <!-- col-md-6 -->
</div> <!-- col-md-10 -->
<div class="col-sm-2 col-md-2 col-lg-2">
<img id="chicago-pic" class="img-responsive" src='https://images.unsplash.com/photo-1500487003906-9baadc8d610d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=0222b085d402a1b7be8c65bbcec574bb' alt='Chicago'>
</div>
</div> <!-- about section and row -->
<div class="portfolio row" name="portfolio-section">
<a href="#" name="portfolio-section"></a>
<h1>Portfolio</h1>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://codepen.io/rcd1693/full/zwQGQW/" class="thumbnail">
<img src="img/TributePage.png" alt="Tribute Page">
<div class="caption text-center">
Tribute Page (HTML/CSS/Bootstrap)
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://github.com/ryan-christopher/HarvardCS50/blob/master/PSET2-Cryptography/caesar.py" class="thumbnail">
<img src="img/caesar.jpg" alt="caesar">
<div class="caption text-center">
Caesar Cipher (Python)
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET3-Finder-GameOf15/find" class="thumbnail">
<img src="img/haystack.jpg" alt="needle in haystack">
<div class="caption text-center">
Finder (C)
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://github.com/ryan-christopher/HarvardCS50/blob/master/PSET3-Finder-GameOf15/fifteen/fifteen.c" class="thumbnail">
<img style="max-height:200px" src="img/15.png" alt="number fifteen">
<div class="caption text-center">
Game of Fifteen (C)
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET6-Sentiment/Sentiment" class="thumbnail">
<img src="img/sentiment.jpg" alt="sentiment">
<div class="caption text-center">
Twitter Sentiment Analyzer (Python/NLTK)
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET7-CS50Finance/finance" class="thumbnail">
<img src="img/business.jpg" alt="quotes">
<div class="caption text-center">
CS50 Finance Trading Website (HTML/CSS/Bootstrap/PostgresSQL/Python)
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET8-Mashup/mashup" class="thumbnail">
<img src="img/map.jpg" alt="map">
<div class="caption text-center">
Mashup (Javascript/SQL/GoogleMaps API/Python)
</div>
</a>
</div>
</div> <!-- portfolio section and row -->
<div class="contact row">
<a href="#" name="contact-section"></a>
<h1>Contact</h1>
<div class="col-xs-9 col-sm-9 col-md-8 col-lg-8">
<form action="https://formspree.io/example@domain.com" method="POST">
<div class="form-group">
<label for="name" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label text-right">Name</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-xl-9">
<input type="text" class="form-control" id="name" placeholder="First and Last Name" required>
</div>
<label for="_replyto" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label text-right">Email</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-xl-9">
<input type="email" class="form-control" id="_replyto" placeholder="example@domain.com" required>
</div>
<label for="message" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label text-right">Message</label>
<div class="col-xs-9 col-sm-9 col-md-9 col-xl-9">
<textarea class="form-control" rows="5" id="message" placeholder="Message" required></textarea>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="text-right">
<button type="submit" class="btn btn-default" value="Send">Send</button>
</div>
</div>
</form>
</div> <!-- form group -->
</div> <!-- col-md-8 -->
<div class="col-xs-3 col-sm-3 col-md-4 col-lg-4">
<h3>For further information concerning the above portfolio samples or opportunities based on related
technologies, send me a note using the form to your left.</h3>
</div> <!-- contact section and row -->
<div class="footer row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<p id="copyright">© 2017 Coder<p>
</div>
</div>
</div> <!-- container fluid -->
<!-- Boostrap Links -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：1)
如果不在所有Bootstraps列上设置静态高度，实现所需内容的一种方法是使其成为flexbox布局。它只需要一个围绕所有Bootstrap列内容的flexbox容器（我只是打开了所有列）。
像这样：
<div class="portfolio-container">
<a href="https://codepen.io/rcd1693/full/zwQGQW/" class="thumbnail">
<img src="img/TributePage.png" alt="Tribute Page">
<div class="caption text-center">
Tribute Page (HTML/CSS/Bootstrap)
</div>
</a>
<a href="https://github.com/ryan-christopher/HarvardCS50/blob/master/PSET2-Cryptography/caesar.py" class="thumbnail">
<img src="img/caesar.jpg" alt="caesar">
<div class="caption text-center">
Caesar Cipher (Python)
</div>
</a>
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET3-Finder-GameOf15/find" class="thumbnail">
<img src="img/haystack.jpg" alt="needle in haystack">
<div class="caption text-center">
Finder (C)
</div>
</a>
<a href="https://github.com/ryan-christopher/HarvardCS50/blob/master/PSET3-Finder-GameOf15/fifteen/fifteen.c" class="thumbnail">
<img style="max-height:200px" src="img/15.png" alt="number fifteen">
<div class="caption text-center">
Game of Fifteen (C)
</div>
</a>
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET6-Sentiment/Sentiment" class="thumbnail">
<img src="img/sentiment.jpg" alt="sentiment">
<div class="caption text-center">
Twitter Sentiment Analyzer (Python/NLTK)
</div>
</a>
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET7-CS50Finance/finance" class="thumbnail">
<img src="img/business.jpg" alt="quotes">
<div class="caption text-center">
CS50 Finance Trading Website (HTML/CSS/Bootstrap/PostgresSQL/Python)
</div>
</a>
<a href="https://github.com/ryan-christopher/HarvardCS50/tree/master/PSET8-Mashup/mashup" class="thumbnail">
<img src="img/map.jpg" alt="map">
<div class="caption text-center">
Mashup (Javascript/SQL/GoogleMaps API/Python)
</div>
</a>
</div>
然后是一些风格：
.portfolio-container {
display: flex;
flex-wrap: wrap;
}
.portfolio-container > * {
width: calc(33% - 10px); /* -10px to account for left and right margins*/
}
@media only screen and (max-width: 767px) {
.portfolio-container > * {
width: calc(50% - 10px);
}
}
查看演示here。