Question

我正在使用bootstrap 3.0.2，我对网格系统有点困惑。我想我理解网格系统，但我不确定这是否是引导程序中的错误，或者我是否以错误的方式使用它。这是我的代码：

<table class="table table-striped">
  <tr>
    <td>
    <!-- if medium or large, then print this in one line -->
      <div class="col-xs-12 col-sm-6 col-md-6"><a href="pseudo-link">text</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3">any text</div>
      <div class="col-xs-4 col-sm-4 col-md-1">info1</div>
      <div class="col-xs-4 col-sm-4 col-md-1">info2</div>
      <div class="col-xs-4 col-sm-4 col-md-1">info3</div>
    <!-- end of first line if medium or large -->


      <div class="col-xs-12">text1 whole line</div><!-- Always one line  -->
      <div class="col-xs-12">text2 whole line</div><!-- Always one line  -->
    </td>
  </tr>
...
</table>

这里的问题是超链接 - 当屏幕宽度大小（col-lg），中等（col-md）或小（col-sm）时，浏览器不像超链接那样处理它。但是如果屏幕宽度特别小（col-xs），超链接工作正常。我用Firebug分析了这个，看起来，前两行被放在一起，就像一个div（屏幕宽度除外）。

通过一个小技巧，我可以解决这个问题，但这只是一个肮脏的黑客。如果屏幕宽度大于特别小，我不会给第二行提供完整的空间：

      <div class="col-xs-12 col-sm-11">text1 whole line</div><!-- Always one line  -->

现在它按预期工作，但我认为它应该没有这个技巧。我的代码错了吗？

为了澄清，我写了一个例子：hyperlink_issue

Answer 1

这是因为您的最后一个col-xs-12位于链接<a>的上方/上方，因为所有cols应该加起来为12，并且不应超过此值。

如果你想要一个12列的新行，你应该放置一个新的<div class="row">

<td>
 <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6"><a target="_blank" href="http://stackoverflow.com">col-md-6 - This Hyperlink should work, but it doesn't!</a></div>
</div>
<div class="row">
 <div class="col-xs-12 col-sm-6 col-md-3">col-md-3</div>
</div>
<div class="row">
 <div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
 <div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
 <div class="col-xs-4 col-sm-4 col-md-1">col-md-1</div>
</div>
<div class="row">
 <div class="col-xs-12">col-xs-12</div>
</div>
<div class="row">
 <div class="col-xs-12">col-xs-12</div>
</div>
</td>

当col-xs-12位于顶部时

check this screenshot

如果您的视图较小，那些cols正在向下移动，screenshot here

Bootstrap 3超链接不起作用的网格系统

1 个答案: