Bootstrap 列不均匀地折叠
Bootstrap columns collapsing unevenly
我是 Bootstrap 的新手，需要创建一些简单的响应式内容，但已经遇到了问题。
最初我将列显示为 3x2 网格，我希望列像这样折叠：
123
456
12
34
56
1
2
3
4
5
6
我正在使用带内容的缩略图方法，如下所示：
http://getbootstrap.com/components/#thumbnails-custom-content
只要每列的内容完全相同（即，如果它们都有相同的电影描述），我就可以完成这项工作，但是一旦内容可变，列就会使用我将拥有的流程规则折叠预计在 Bootstrap.
之外
代码如下：
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW1.jpeg" />
<div class="caption">
<h3>The Phantom Menace</h3>
<p> Stranded on the desert planet Tatooine after rescuing young Queen Amidala from the impending invasion of Naboo, Jedi apprentice Obi-Wan Kenobi and his Jedi Master Qui-Gon Jinn discover nine-year-old Anakin Skywalker, a young slave unusually strong in the Force. Anakin wins a thrilling Podrace and with it his freedom as he leaves his home to be trained as a Jedi. The heroes return to Naboo where Anakin and the Queen face massive invasion forces while the two Jedi contend with a deadly foe named Darth Maul. Only then do they realize the invasion is merely the first step in a sinister scheme by the re-emergent forces of darkness known as the Sith.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW2.jpeg" />
<div class="caption">
<h3>Attack of the Clones</h3>
<p>Ten years after the invasion of Naboo, the galaxy is on the brink of civil war. Under the leadership of a renegade Jedi named Count Dooku, thousands of solar systems threaten to break away from the Galactic Republic. When an assassination attempt is made on Senator Padmé Amidala, the former Queen of Naboo, twenty-year-old Jedi apprentice Anakin Skywalker is assigned to protect her. In the course of his mission, Anakin discovers his love for Padmé as well as his own darker side. Soon, Anakin, Padmé, and Obi-Wan Kenobi are drawn into the heart of the Separatist movement and the beginning of the Clone Wars.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW3.jpeg" />
<div class="caption">
<h3>Revenge of the Sith</h3>
<p>Years after the onset of the Clone Wars, the noble Jedi Knights lead a massive clone army into a galaxy-wide battle against the Separatists. When the sinister Sith unveil a thousand-year-old plot to rule the galaxy, the Republic crumbles and from its ashes rises the evil Galactic Empire. Jedi hero Anakin Skywalker is seduced by the dark side of the Force to become the Emperor's new apprentice -- Darth Vader. The Jedi are decimated, as Obi-Wan Kenobi and Jedi Master Yoda are forced into hiding. The only hope for the galaxy are Anakin's own offspring -- the twin children born in secrecy who will grow up to become heroes.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW4.jpeg" />
<div class="caption">
<h3>A New Hope</h3>
<p>Nineteen years after the formation of the Empire, Luke Skywalker is thrust into the struggle of the Rebel Alliance when he meets Obi-Wan Kenobi, who has lived for years in seclusion on the desert planet of Tatooine. Obi-Wan begins Luke's Jedi training as Luke joins him on a daring mission to rescue the beautiful Rebel leader Princess Leia from the clutches of the evil Empire. Although Obi-Wan sacrifices himself in a lightsaber duel with Darth Vader, his former apprentice, Luke proves that the Force is with him by destroying the Empire's dreaded Death Star.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW5.jpeg" />
<div class="caption">
<h3>The Empire Strikes Back</h3>
<p>After the destruction of the Death Star, Imperial forces continue to pursue the Rebels. After the Rebellion's defeat on the ice planet Hoth, Luke journeys to the planet Dagobah to train with Jedi Master Yoda, who has lived in hiding since the fall of the Republic. In an attempt to convert Luke to the dark side, Darth Vader lures young Skywalker into a trap in the Cloud City of Bespin. In the midst of a fierce lightsaber duel with the Sith Lord, Luke faces the startling revelation that the evil Vader is in fact his father, Anakin Skywalker.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW6.jpeg" />
<div class="caption">
<h3>Return of the Jedi</h3>
<p>In the epic conclusion of the saga, the Empire prepares to crush the Rebellion with a more powerful Death Star while the Rebel fleet mounts a massive attack on the space station. Luke Skywalker confronts his father Darth Vader in a final climactic duel before the evil Emperor. In the last second, Vader makes a momentous choice: he destroys the Emperor and saves his son. The Empire is finally defeated, the Sith are destroyed, and Anakin Skywalker is thus redeemed. At long last, freedom is restored to the galaxy.</p>
</div>
</div>
</div>
</div>
</div>
是我做错了什么，还是我太天真了，对Bootstrap本身期望过高？
在您的专栏之间，您应该添加 Responsive Resets. On md viewports, you need a clearfix after every third column, on sm viewports, you need one after every second column. This Question 很好地解释了正在发生的事情。
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md-block"></div>
您的专栏应如下所示...
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
我是 Bootstrap 的新手，需要创建一些简单的响应式内容，但已经遇到了问题。
最初我将列显示为 3x2 网格，我希望列像这样折叠：
123
456
12
34
56
1
2
3
4
5
6
我正在使用带内容的缩略图方法，如下所示： http://getbootstrap.com/components/#thumbnails-custom-content
只要每列的内容完全相同（即，如果它们都有相同的电影描述），我就可以完成这项工作，但是一旦内容可变，列就会使用我将拥有的流程规则折叠预计在 Bootstrap.
之外代码如下：
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW1.jpeg" />
<div class="caption">
<h3>The Phantom Menace</h3>
<p> Stranded on the desert planet Tatooine after rescuing young Queen Amidala from the impending invasion of Naboo, Jedi apprentice Obi-Wan Kenobi and his Jedi Master Qui-Gon Jinn discover nine-year-old Anakin Skywalker, a young slave unusually strong in the Force. Anakin wins a thrilling Podrace and with it his freedom as he leaves his home to be trained as a Jedi. The heroes return to Naboo where Anakin and the Queen face massive invasion forces while the two Jedi contend with a deadly foe named Darth Maul. Only then do they realize the invasion is merely the first step in a sinister scheme by the re-emergent forces of darkness known as the Sith.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW2.jpeg" />
<div class="caption">
<h3>Attack of the Clones</h3>
<p>Ten years after the invasion of Naboo, the galaxy is on the brink of civil war. Under the leadership of a renegade Jedi named Count Dooku, thousands of solar systems threaten to break away from the Galactic Republic. When an assassination attempt is made on Senator Padmé Amidala, the former Queen of Naboo, twenty-year-old Jedi apprentice Anakin Skywalker is assigned to protect her. In the course of his mission, Anakin discovers his love for Padmé as well as his own darker side. Soon, Anakin, Padmé, and Obi-Wan Kenobi are drawn into the heart of the Separatist movement and the beginning of the Clone Wars.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW3.jpeg" />
<div class="caption">
<h3>Revenge of the Sith</h3>
<p>Years after the onset of the Clone Wars, the noble Jedi Knights lead a massive clone army into a galaxy-wide battle against the Separatists. When the sinister Sith unveil a thousand-year-old plot to rule the galaxy, the Republic crumbles and from its ashes rises the evil Galactic Empire. Jedi hero Anakin Skywalker is seduced by the dark side of the Force to become the Emperor's new apprentice -- Darth Vader. The Jedi are decimated, as Obi-Wan Kenobi and Jedi Master Yoda are forced into hiding. The only hope for the galaxy are Anakin's own offspring -- the twin children born in secrecy who will grow up to become heroes.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW4.jpeg" />
<div class="caption">
<h3>A New Hope</h3>
<p>Nineteen years after the formation of the Empire, Luke Skywalker is thrust into the struggle of the Rebel Alliance when he meets Obi-Wan Kenobi, who has lived for years in seclusion on the desert planet of Tatooine. Obi-Wan begins Luke's Jedi training as Luke joins him on a daring mission to rescue the beautiful Rebel leader Princess Leia from the clutches of the evil Empire. Although Obi-Wan sacrifices himself in a lightsaber duel with Darth Vader, his former apprentice, Luke proves that the Force is with him by destroying the Empire's dreaded Death Star.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW5.jpeg" />
<div class="caption">
<h3>The Empire Strikes Back</h3>
<p>After the destruction of the Death Star, Imperial forces continue to pursue the Rebels. After the Rebellion's defeat on the ice planet Hoth, Luke journeys to the planet Dagobah to train with Jedi Master Yoda, who has lived in hiding since the fall of the Republic. In an attempt to convert Luke to the dark side, Darth Vader lures young Skywalker into a trap in the Cloud City of Bespin. In the midst of a fierce lightsaber duel with the Sith Lord, Luke faces the startling revelation that the evil Vader is in fact his father, Anakin Skywalker.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="Images/SW6.jpeg" />
<div class="caption">
<h3>Return of the Jedi</h3>
<p>In the epic conclusion of the saga, the Empire prepares to crush the Rebellion with a more powerful Death Star while the Rebel fleet mounts a massive attack on the space station. Luke Skywalker confronts his father Darth Vader in a final climactic duel before the evil Emperor. In the last second, Vader makes a momentous choice: he destroys the Emperor and saves his son. The Empire is finally defeated, the Sith are destroyed, and Anakin Skywalker is thus redeemed. At long last, freedom is restored to the galaxy.</p>
</div>
</div>
</div>
</div>
</div>
是我做错了什么，还是我太天真了，对Bootstrap本身期望过高？
在您的专栏之间，您应该添加 Responsive Resets. On md viewports, you need a clearfix after every third column, on sm viewports, you need one after every second column. This Question 很好地解释了正在发生的事情。
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md-block"></div>
您的专栏应如下所示...
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
...
</div>