แถว Bootstrap ขยายเกินคอลัมน์ที่ครอบคลุม

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

<div class="col-lg-2">
    <div id="left-sidebar">
        <div id="want-answers">
            <p><small>18 WANT ANSWERS</small></p>
            <hr>
            <div class="row">
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
            </div>

            <div class="row">
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
            </div>
        </div>
        <!-- /#want-answers -->

แถบด้านข้างซ้ายมีความกว้าง 2 คอลัมน์ ขณะนี้ ขณะที่รูปภาพแสดง แต่ละแถว (การเน้นแนวนอน) จะขยาย want-answers div (การเน้นสีน้ำเงินแนวตั้ง) ทำไมจึงเป็นเช่นนั้น? แถวไม่ควรรวมความกว้างเต็มของการรวม col-lg-2 div ไว้ใช่หรือไม่

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


css twitter-bootstrap twitter-bootstrap-3
person abhinavkulkarni    schedule 20.04.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
0
arrow_downward

ฉันไม่แน่ใจว่านี่เป็นปัญหาหรือไม่ แต่ลองปิดแท็กรูปภาพของคุณดังนี้: <img src="img/350x350.gif}" alt="" width="32px" height="32px"/> ในโค้ดของคุณไม่มีเครื่องหมายทับต่อท้าย

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

ซีเอสเอส:

#left-sidebar {
text-align:center;
background:#ccc;
}
.min-width {
min-width:153px;
}
#want-answers {
background:#f1f1f1;
min-width:153px;
width:100%;
text-align:center;
}
.no-marg-pad {
padding:0;
margin:0;
}
.img-line {
background:#000;
width:100%;
min-width:153px;
}
.img-padding {
padding:0;
margin-bottom:10px;
}

HTML

<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width">
<div class="row no-marg-pad">
    <div id="want-answers" class="col-xs-12">
        <p><small>18 WANT ANSWERS</small></p>
    </div>
</div>
<div class="row no-marg-pad">
    <div class="img-line">
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
    </div>
</div>
<div class="row no-marg-pad">
    <div class="img-line">
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
    </div>

อีกสิ่งหนึ่งที่คุณอาจต้องการดูคือการกำหนดความกว้างของคอลัมน์สำหรับหน้าจอขนาดเล็กและขนาดกลางเช่นกัน เช่น col-sm-2 col-md-2

person Kinburn101    schedule 20.04.2015

arrow_upward
0
arrow_downward

ฉันไม่แน่ใจว่าคุณมี CSS ที่กำหนดเองสำหรับ #want-answers หรือ #left-sidebar หรือไม่ แต่ปัญหาหนึ่งคือรูปภาพขนาด 4-32px มักจะขยายเกินความกว้างของ col-lg-2 เปลี่ยนเป็น img-responsive เพื่อให้ย่อขนาดตามต้องการ..

<div class="col-lg-3">
   <img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>

http://codeply.com/go/OtSvmYQfcX

person Zim    schedule 20.04.2015