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，其信息可以在此页面上找到＆gt; 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>

Bootstrap渲染文本与行和col内的图像

1 个答案: