Bootstrap รวมแถว (rowspan)

129

ฉันกำลังทดสอบTwitter Bootstrapและติดอยู่กับนั่งร้านพื้นฐานที่มีแถว ฉันตรวจดูเอกสารของพวกเขาหลายครั้งและฉันสามารถเห็นคอลัมน์การซ้อนซึ่งโดยพื้นฐานแล้วคุณสามารถซ้อนคอลัมน์ภายในคอลัมน์ได้ แต่ฉันไม่พบความสามารถในการรวมแถวเป็นหนึ่งและจัดให้สอดคล้องกับคอลัมน์ถัดจากแถวที่ไม่ได้รวมกัน

ภาพด้านล่างควรแสดงให้เห็นถึงสิ่งที่ฉันต้องการทำให้สำเร็จ

ตัวอย่างเค้าโครง rowspan

วิธีแก้ปัญหาเดียวที่ฉันพบคือการใช้ตาราง แต่ฉันไม่ชอบแนวคิดนี้เนื่องจากมุมมองของฉันคือการตอบสนองจะไม่ทำงานกับการใช้ตาราง

ใครมีวิธีแก้ปัญหาที่สวยงามสำหรับเรื่องนี้หรือไม่? รูปแบบเว็บส่วนใหญ่ที่ฉันทำจะต้องมีความยืดหยุ่นในระดับที่ดีดังนั้นมันจะดีมากถ้าฉันสามารถเลือกสิ่งที่เป็นประโยชน์ได้ที่นี่

twitter-bootstrap bootstrap-grid

— ซองลี
แหล่งที่มา

100

หารสแต็กในแนวตั้งตามค่าเริ่มต้นดังนั้นจึงไม่จำเป็นต้องจัดการ "แถว" แบบพิเศษภายในคอลัมน์

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

ขยายข้อมูลโค้ด

นี่คือไวโอลิน

— พอลคีสเตอร์
แหล่งที่มา

2

ขอบคุณมาก ๆ. นั่นคือสิ่งที่ฉันกำลังมองหา! ฉันต้องการเอกสาร Bootstrap ที่กล่าวถึงสิ่งนี้เพิ่มเติมภายใต้คอลัมน์ที่ซ้อนกันเนื่องจากวิธีการนั้นเหมือนกัน

— Seong Lee

1

ในตัวอย่างของคุณที่คุณกำหนด,1row=25px 2row=50pxคุณสามารถทำให้ div ที่ขยายได้สูงเท่าทั้งแถวได้ไหม พยายามเพิ่ม.row{height:100%;}แต่มันไม่ไป

— Tomer W

ใช่ @carter ตัวอย่างเดิมไม่สอดคล้องกับ bootstrap 3; ฉันได้แก้ไขแล้ว

— Paul Keister

1

ตัวอย่างมีรางน้ำในแถวที่สองซึ่งมีลักษณะแปลก

— Connie DeCinko

84

คุณควรใช้การซ้อนคอลัมน์ bootstrap

ดูBootstrap 3หรือBootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(ในหน้าจอ Fiddle ขยายหน้าจอทดสอบของคุณเพื่อดูผลลัพธ์เพราะฉันใช้ col- md - * แล้วตอบสนองคอลัมน์สแต็ก)

หมายเหตุ : ฉันไม่แน่ใจว่า BS2 อนุญาตให้มีการซ้อนคอลัมน์แต่ในคำตอบของ Paul Keister ไม่ได้ใช้การซ้อนคอลัมน์ คุณควรใช้มันและหลีกเลี่ยงการสร้าง css ขึ้นมาใหม่ในขณะที่ bootstrap ทำได้ดี

ความสูงของคอลัมน์เป็นแบบอัตโนมัติหากคุณเพิ่มบรรทัดที่สอง (เช่นที่ฉันทำในตัวอย่างของฉัน) ความสูงของคอลัมน์จะปรับตัวเอง

— Alcalyn
แหล่งที่มา

10

นี่ควรเป็นคำตอบที่ยอมรับได้เพราะใช้งานได้กับ Bootstrap นอกกรอบและไม่ต้องการการปรับแต่ง CSS ใด ๆ

— cheenbabes

คำตอบที่ยอมรับนั้นอ่านได้ง่ายขึ้น ประกอบด้วยข้อมูลโค้ดและลิงก์ไปยัง JSfiddle และตัวอย่างของ IMHO Paul Keister นั้นชัดเจนกว่าตัวอย่างของ Alcalyn นั่นเป็นเหตุผลที่ฉันคิดว่า Paul Keister ควรถูกเก็บไว้เป็นคำตอบที่ยอมรับอย่างน้อยก็จนกว่าคำตอบของ Alcalyn จะดีขึ้น

— naXa

1

@Alcalyn ในเบราว์เซอร์ของฉัน (Chrome) ซอที่เชื่อมโยงจากคำตอบของคุณไม่ได้ผลลัพธ์ที่คาดหวัง (ดูภาพในคำถาม) ผลลัพธ์ที่แท้จริงคือ div ทั้งหมดที่จัดแนวในคอลัมน์

— naXa

1

หากคุณเห็นคอลัมน์เดียวที่มีระยะชิดทั้งหมดนั่นเป็นเพราะ-md-กฎที่ตอบสนอง คุณต้องขยายหน้าจอเพื่อดูผลลัพธ์ที่คาดหวัง หากคุณต้องการมีช่วงของคุณจะแสดงเป็นคอลัมน์ในหน้าจอขนาดเล็กแทนที่-md-โดยหรือ-sm- -xs-นี่คือคำถามเกี่ยวกับเบรกพอยต์ (ดูbootstrapdocs.com/v3.0.3/docs/css/#grid )

— Alcalyn

12

หมายเหตุ: สำหรับ Bootstrap 2 (เกี่ยวข้องเมื่อคำถามถูกถาม)

คุณสามารถทำได้โดยการใช้row-fluidที่จะทำให้ของเหลว (ร้อยละ) blockแถวตามภายในที่มีอยู่

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

นี่คือไฟล์ ตัวอย่าง JSFiddle

ฉันสังเกตเห็นว่ามีระยะขอบด้านซ้ายที่เป็นเลขคี่ปรากฏขึ้น (หรือไม่ปรากฏ) สำหรับช่วงที่อยู่ด้านในของrow-fluidหลังอันแรก สิ่งนี้สามารถแก้ไขได้ด้วยการปรับแต่ง CSS ขนาดเล็ก (เป็น CSS เดียวกับที่ใช้กับลูกคนแรกขยายไปที่ลูกคนแรก):

.row-fluid [class*="span"] {
    margin-left: 0;
}

— pickypg
แหล่งที่มา

ขอบคุณสำหรับความพยายามของคุณ แต่ดูเหมือนว่าแถวนั้นไม่จำเป็นต้องใช้ row-fluid เพื่อทำสิ่งนี้ให้สำเร็จตามคำแนะนำที่ฉันเลือก ฉันรู้สึกซาบซึ้งจริงๆ!

— Seong Lee

1

จริงมาก แต่อย่าลืมrow-fluidว่าเมื่อถึงเวลาที่ต้องเริ่มแยกแถวด้านใน

— pickypg

7

ตรวจสอบสิ่งนี้ หวังว่ามันจะช่วยเต็มที่สำหรับคุณ

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

— Manish Sharma
แหล่งที่มา

2

คำตอบของพอลดูเหมือนจะเอาชนะจุดประสงค์ของ bootstrap; ที่ตอบสนองต่อวิวพอร์ต / ขนาดหน้าจอ

การซ้อนแถวและคอลัมน์จะทำให้คุณได้ผลลัพธ์เดียวกันในขณะที่ยังคงการตอบสนอง

นี่คือคำตอบล่าสุดสำหรับปัญหานี้

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

ขยายข้อมูลโค้ด

คุณสามารถดู codepen ได้ที่นี่

— vasavest
แหล่งที่มา

0

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

ขยายข้อมูลโค้ด

— สุดิปสิงห์
แหล่งที่มา

สิ่งนี้ใช้ไม่ได้สำหรับฉันกับ <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- color: yellow; "> <input type =" file "id =" imgInp "name =" img "accept =". png, .jpg, .jpeg "> <! - <input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </input> -> <img id =" img-upload "src =" "alt =" ขนย้าย "width =" 300% " height = "50%" class = "rounded-circle" /> </div> </div> </div>

— SUDIP SINGH

2

โปรดเพิ่มคำอธิบายเกี่ยวกับรหัสของคุณ เพื่อให้ OP และผู้อ่านในอนาคตสามารถเข้าใจคำตอบของคุณได้อย่างง่ายดาย

— Sangam Belose