html - 使用 Bootstrap 在 HTML 页面上的一行中限制文本

Question

图像下方有一个图像和标题整个页面都有相同的东西，它们下方有 4 个图像和标题但是当标题中的文本进入下一行时整个设计都会变质。看看屏幕短裤。

一行的标题是这样的

 Headline in two line looks like this

CSS

<div class="row">
                <!--Start OF Live Feeds-->
                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>
                    </div>
                </div>
              </div>

@易卜拉欣Alsurkhi

我如何实现你所说的这样

    <style type="text/css">

    .work-item{
    min-height:250px;
    }
</style>

然后在div标签类上

<div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>

                    </div>

                </div>

两行代码

 <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>

                    </div>

                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsTwo" runat="server" onserverclick="LiveFeedsTwoEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsTwo" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsTwo" runat="server" Text="Live Feeds Two: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsThree" runat="server" onserverclick="LiveFeedsThreeEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsThree" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsThree" runat="server" Text="Live Feeds Three: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsFour" runat="server" onserverclick="LiveFeedsFourEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsFour" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsFour" runat="server" Text="Live Feeds Four: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsFive" runat="server" onserverclick="LiveFeedsFiveEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsFive" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsFive" runat="server" Text="Live Feeds Five: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsSix" runat="server" onserverclick="LiveFeedsSixEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsSix" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsSix" runat="server" Text="Live Feeds Six: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsSeven" runat="server" onserverclick="LiveFeedsSevenEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsSeven" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsSeven" runat="server" Text="Live Feeds Seven: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsEight" runat="server" onserverclick="LiveFeedsEightEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsEight" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsEight" runat="server" Text="Live Feeds Eight: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

Answer 1

请务必将四列组合到一个 .row 元素中，这一点很重要。

.row 类清除了列的 float ，这样无论一行中的各个列有多高，下一行中的列总是再次从同一垂直线上开始.

Bootstrap 网格系统是一个 12 列网格，因此您使用的 col-sm-x 类的“x”总和也必须为 12，这一点很重要. (少于 12 个会起作用，但不是常见的用例 - 超过 12 个肯定会导致不良影响，例如您在此处看到的那个。)