Bootstrap列不均匀地折叠

时间:2015-03-04 14:34:20

标签: twitter-bootstrap twitter-bootstrap-3

我是使用Bootstrap的新手,需要创建一些简单的响应内容,但已经遇到了问题。

最初我将列显示为3x2网格,我希望列像这样崩溃:

123
456

12
34
56

1
2
3
4
5
6

我正在使用Thumbnail-with-content方法,如下所示: 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本身过多?

1 个答案:

答案 0 :(得分:0)

在您的列之间,您应添加Responsive Resets。在md视口中,您需要在{3}个视口后的每三个列后clearfix,每隔一列需要一个。{1}}视口。 This Question可以很好地解释发生了什么。

DEMO

sm

你的专栏应该是这样的......

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md-block"></div>