0
ブートストラップグリッドで物事が「浮動」している意味で非常に新しく、clearfixです。私の誤った印象の下では、私のcol - {ビューポートサイズ} - が意味を成していれば、すべてが多かれ少なかれ落ち着くだろうという印象の下にあった。私は間違っていた。Clearfixがサムネイルの間隔の問題を解決しない
以下のマークアップでは、xs、sm、md、およびlgのスクリーン用にBootstrapクラスを設定した一連のサムネイルがあります。画面の幅が< = 1190pxの場合、「Game of 15」の1行と3つの画像の行が続き、3つの画像の行が表示されます。 「Game of Fifteen」の上にclearfixタグを追加すると、このサイズで問題が修正されましたが、ビューポートが小さくなるにつれて「Finder」画像でも同じことが起こりました。 Clearfixはこの2番目の問題を解決します。 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/[email protected]" 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="[email protected]" 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>
ブートストラップは、デフォルトで12列の行に構築されることを前提としています。あなたの '.portfolio.row'は12列以上の方法を持っています。すべての列に同じ静的な高さを設定しない限り、正しく動作させるには、 '.row'に12列ごとにラップする必要があります。 – zgood
そしてそれはcol-md- *スクリーンだけを考えた私の初期のデザインでした。しかし、モバイルやタブレットなどのレスポンス機能を追加したいと思っていました。たとえば、モバイルやタブレットで見ると、サムネイルは2つだけ必要でしたが、中程度の画面では3つのサムネイルが必要でした。私が研究したことから、これがその効果を得ることでした。推奨できる代替アプローチがありますか？ – Ryan
これは、ポートフォリオ行のすべての列に静的な高さを設定するだけで済みます。このプロジェクトのためにできることは何ですか？ （「引用符」の列は2行のテキストに折り返して、それよりも背を高くします） – zgood