ฉันจะรับคอลัมน์ Bootstrap เพื่อขยายหลายแถวได้อย่างไร

158

ฉันพยายามหาวิธีทำตารางต่อไปนี้ด้วย Bootstrap

ฉันไม่แน่ใจว่าฉันจะสร้างกล่อง (หมายเลข 1) ที่ครอบคลุมสองแถวได้อย่างไร กล่องถูกสร้างโดยทางโปรแกรมตามลำดับที่วาง ช่อง 1 คือข้อความต้อนรับ

ป้อนคำอธิบายรูปภาพที่นี่

มีความคิดเกี่ยวกับวิธีที่ดีที่สุดที่จะไปกับสิ่งนี้

css twitter-bootstrap

— James Jeffery
แหล่งที่มา

1

twitter.github.io/bootstrap/scaffolding.html#gridSystemคุณสามารถซ้อนระบบกริด Bootstrap

— TheHippo

1

ดังนั้นสร้าง 2 แถวแทนที่จะเป็น 3 วางซ้อน 2 แถวภายในแถวแรก? นี่อาจเป็นปัญหาเมื่อกล่องถูกสร้างขึ้นโดยทางโปรแกรม

— James Jeffery

1

ไม่ทราบว่าจะใช้งานได้หรือไม่ แต่จะเพิ่มpull-leftคลาสในกล่องทั้งหมดได้หรือไม่ มันจะไม่ทำให้กล่อง 1 มีความสูงเท่ากับ 2 + 4 แต่ควรอนุญาตให้มันทำงานเมื่อคุณตั้งค่าความสูง

— Hailwood

Hailwood ใส่คำตอบนั้นถ้าคุณทำได้ถ้าไม่ใช่ฉันจะวางรหัสของฉัน มันทำงานได้ ... อย่างน้อยใน Chrome จำเป็นต้องทดสอบในเบราว์เซอร์อื่น

— James Jeffery

@Hailwood infact ไม่จำเป็นต้องดึงซ้าย เพียงแค่ตั้งค่าความสูงขององค์ประกอบแรกให้ใช้งานได้

— James Jeffery

164

สำหรับ Bootstrap 3:

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


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

ขยายตัวอย่างข้อมูล

สำหรับ Bootstrap 2:

แสดงตัวอย่างโค้ด

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

ขยายตัวอย่างข้อมูล

ดูตัวอย่างบน JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

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

คุณจะทำกล่องสี่และห้าเติมความสูงของแถวอย่างไรเมื่อกล่องสี่เหลี่ยมโตขึ้น?

— Imran NZ

2

stackoverflow.com/questions/19695784/…

— Mastergalen

นี่คือตัวอย่างที่ใช้งานไม่ได้ขอบด้านล่างของคอลัมน์แรกนั้นไม่ตรงแนวกับส่วนที่เหลือเล็กน้อย

— JackKalish

นี่เป็นคำตอบที่ดี แต่ถ้าช่อง 5 จำเป็นต้องขยายเข้าไปในแถวที่ 3 ด้วยและอื่น ๆ มากไปกว่านี้แบบไดนามิก?

— Misha'el

@ Misha'el นั่นง่ายมากเพียงแค่ทำในสิ่งที่เขาทำเพื่อกล่องที่ 1 และใช้กับกล่อง 3/5 ควรมีคอลัมน์ที่มีขนาดเท่ากัน 3 คอลัมน์คอลัมน์ด้านนอกจะมีเพียง 1 แถวคอลัมน์ที่อยู่ด้านในสองแถว

— Nathan Williams

17

เช่นเดียวกับความคิดเห็นที่แนะนำการแก้ปัญหาคือการใช้ช่วง / แถวที่ซ้อนกัน

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>

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

1

ตัวอย่างด้านล่างดูเหมือนจะใช้ได้ เพียงแค่ตั้งค่าความสูงในองค์ประกอบแรก

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

ฉันอดไม่ได้ที่จะคิดว่ามันเป็นการใช้แถวที่ไม่ถูกต้อง

— James Jeffery
แหล่งที่มา

1

ฉันเชื่อว่าส่วนเกี่ยวกับวิธีการขยายแถวได้รับการตอบอย่างถี่ถ้วน (เช่นโดยการซ้อนแถว) แต่ฉันก็พบปัญหาของแถวที่ซ้อนกันของฉันที่ไม่ได้เติมในคอนเทนเนอร์ของพวกเขา ในขณะที่ตัวเลือก flexbox และระยะขอบลบเป็นวิธีแก้ปัญหาที่ง่ายกว่ามากคือการใช้h-50คลาสที่กำหนดไว้ล่วงหน้าในrowกล่องที่มี 2, 3, 4 และ 5

หมายเหตุ: ฉันกำลังใช้Bootstrap-4ฉันแค่ต้องการแบ่งปันเพราะฉันพบปัญหาเดียวกันและพบว่านี่เป็นวิธีที่ยอดเยี่ยมกว่า :)

— Shareef Hadid
แหล่งที่มา

0

<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>

— Ps Naidu
แหล่งที่มา