html - Bootstrap 在一行和一列中使用图像渲染文本

Question

我目前正在尝试在图像下方呈现文本，但我无法阻止文本向下推到下面的列上，从而导致当前的整体网格困惑。

我想做的就是保持网格比例。我已经使用 class="col-md-2 col-sm-6"运行了一些测试，这适用于文本和图像，但一行中只有 4 个对象。

如果我在一行 class="col-md-2 col-sm-6"中使用 6 个对象，文本将无法正确呈现，从而弄乱页面。

当文本不长时网格工作的例子:

当文本与 bootstrap col 重叠过长时网格困惑的示例:

使用的图片:

使用的代码:

<div class="row">
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink0" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink1" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink2" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink3" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test Tester tester tester</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink4" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink5" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink6" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink7" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink8" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink9" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink10" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
            <div class="col-md-2 col-sm-6" style="margin-bottom: 1cm; text-align:center; font-size: 160%;">
<asp:HyperLink ID="HyperLink11" runat="server" Visible="true" NavigateUrl="#" Target="_blank" style="color: rgb(0, 130, 86);"><img class="img-responsive img-portfolio" src="/images/text.png" alt="" width="500" height="250">Test</asp:HyperLink> 
            </div>
</div>

Answer 1

当您的文本变得太长时网格中断的原因是因为您需要重置列。在该行最后一列的末尾，您需要添加一个 clearfix div，相关信息可在此页面上找到 > Responsive Column Resets

我已经使用了一些你的代码来告诉你 clearfix div 需要去哪里:

<div class="row">
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test Tester tester tester</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <div class="col-md-2 col-sm-6">
      <p>Test</p>
    </div>
    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md-block"></div>
</div>