Bootstrap 3 Hyperlink tidak berfungsi karena sistem grid

Saya menggunakan bootstrap 3.0.2 dan saya sedikit bingung karena sistem gridnya. Saya rasa saya memahami sistem grid, tetapi saya tidak yakin apakah ini bug di bootstrap atau apakah saya menggunakannya dengan cara yang salah. Ini kode saya:

<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="/idpseudo-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>

Masalahnya di sini adalah hyperlink - browser tidak menanganinya seperti hyperlink, ketika lebar layar berukuran besar (col-lg), sedang (col-md) atau kecil (col-sm). Namun hyperlink berfungsi dengan baik, jika lebar layar ekstra kecil (col-xs). Saya telah menganalisis ini dengan Firebug dan tampaknya, dua baris pertama disatukan, seperti satu div (kecuali lebar layar sangat kecil).

Dengan sedikit trik saya bisa memperbaikinya, tapi itu hanya peretasan kotor. Jika lebar layar lebih besar dari ekstra kecil, saya tidak memberikan ruang penuh pada baris kedua:

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

Sekarang ini berfungsi seperti yang diharapkan tetapi menurut saya ini juga akan berfungsi tanpa trik ini. Apakah kode saya salah?

Untuk klarifikasi saya telah menulis sebuah contoh: hyperlink_issue


html css twitter-bootstrap hyperlink
person overnumerousness    schedule 24.11.2013    source sumber
comment
Pertanyaannya sama sekali tidak jelas dan tidak tahu apa yang Anda bicarakan. Gambar apa saja atau apa saja   -  person Anonymous    schedule 24.11.2013
comment
saya telah menulis sebuah contoh, periksa di sini: hyperlink_issue   -  person overnumerousness    schedule 24.11.2013

Jawaban (1)


arrow_upward
4
arrow_downward

Itu karena 2 col-xs-12 terakhir Anda diposisikan di atas/di atas tautan Anda <a> karena faktanya semua kolom harus berjumlah 12, dan tidak boleh melebihi ini.

Jika Anda ingin baris baru sebanyak 12 kolom, Anda harus menempatkan <div class="row"> baru

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

periksa tangkapan layar ini ketika col-xs-12 berada di atas

Jika tampilan Anda lebih kecil, kolom tersebut akan dipindahkan ke bawah, tangkapan layar di sini

person Mark    schedule 24.11.2013