Bootstrap 3 Hyperlink ไม่ทำงานสาเหตุของระบบกริด

ฉันใช้ 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="/thpseudo-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


html css twitter-bootstrap hyperlink
person overnumerousness    schedule 24.11.2013    source แหล่งที่มา
comment
คำถามไม่ชัดเจนโดยสิ้นเชิงและไม่รู้ว่าคุณกำลังพูดถึงอะไร รูปอะไรก็ได้หรือป่าว.   -  person Anonymous    schedule 24.11.2013
comment
ฉันได้เขียนตัวอย่างแล้ว โปรดดูที่นี่: hyperlink_issue   -  person overnumerousness    schedule 24.11.2013

คำตอบ (1)


arrow_upward
4
arrow_downward

นั่นเป็นเพราะว่า col-xs-12 2 อันสุดท้ายของคุณอยู่ในตำแหน่งด้านบน/บนสุดของลิงก์ <a> เนื่องจากคอลัมน์ทั้งหมดควรรวมกันได้ 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 อยู่ด้านบน

หากมุมมองของคุณเล็กลง คอลัมน์เหล่านั้นจะเลื่อนลง ภาพหน้าจอที่นี่

person Mark    schedule 24.11.2013