Html 引导程序使用行和列中的图像呈现文本

我目前正在尝试渲染图像下方的文本，我让truble停止文本向下压在下面的列上，使当前的整体网格混乱

我想做的就是保持网格比率。我已经使用class=“col-md-2 col-sm-6”运行了一些测试，这可以很好地处理文本和图像，但一行中只有4个对象

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

文本不太长时的网格工作示例：

文本与引导列重叠过长时网格混乱的示例：

使用的图像：

使用的代码：

<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>

试验
试验
试验
测试仪
试验
试验
试验
试验
试验
试验
试验
试验

文本过长时网格中断的原因是您需要重置列。在行的最后一列末尾，您需要添加clearfix div，其信息可在此页面上找到>

我从您的代码中提取了一些片段，向您展示了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>

试验

试验

测试仪

试验

试验

试验

试试这个例子。假设页面大小为12。为每个分区放置分区。在这段代码中，我插入div和row来创建一个新行，并划分列数，这就是不同高度的浮动元素的情况。如果您知道每行有多少个元素，可以通过清除相应元素上的浮动来解决。或者切换到使用内联块而不是浮点的解决方案。我目前有一个固定版本，但在6个对象之后使用新行，但是，我现在移动到自动生成的对象，我不知道有多少对象将填充网格。我可以通过某种方式创建一个计数函数，这样在循环中的6个对象之后，添加一个新行等等。但这当然是一个稍微不同的问题。因为我只想知道它是否可以通过单独使用引导渲染来修复。但是内联块方法听起来很有趣。