Baris bootstrap melampaui kolom-kolom yang melingkupinya

Saya telah mencoba meniru desain Quora di Bootstrap ketika saya mengalami masalah berikut. Di setiap halaman pertanyaan Quora, ucapkan yang ini, ada sidebar kiri. Jadi untuk bagian pertama (berjudul 'Ingin Jawaban'), saya memiliki struktur berikut:

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

Sidebar kiri lebarnya 2 kolom. Sekarang, saat gambar ditampilkan, setiap baris (penyorotan horizontal) meluas want-answers div (penyorotan biru vertikal). Mengapa demikian? Bukankah seharusnya baris mencakup lebar penuh dari col-lg-2 div?

masukkan deskripsi gambar di sini


css twitter-bootstrap twitter-bootstrap-3
person abhinavkulkarni    schedule 20.04.2015    source sumber

Jawaban (2)


arrow_upward
0
arrow_downward

Saya tidak yakin apakah ini masalah tetapi coba tutup tag gambar Anda seperti ini: <img src="img/350x350.gif}" alt="" width="32px" height="32px"/> di kode Anda tidak ada garis miring.

Sebagian besar pencapaian apa yang Anda cari berkaitan dengan mengesampingkan padding dan margin default yang diterapkan bootstrap pada baris dan atau kolom. Saya dapat memuat gambar dan memusatkannya dengan modifikasi berikut: DEMO

CSS:

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

Satu hal lain yang mungkin ingin Anda lihat adalah menentukan lebar kolom untuk layar berukuran kecil dan menengah, misalnya. col-sm-2 col-md-2

person Kinburn101    schedule 20.04.2015

arrow_upward
0
arrow_downward

Saya tidak yakin apakah Anda memiliki CSS khusus untuk #want-answers atau #left-sidebar, tetapi satu masalahnya adalah gambar berukuran 4-32 piksel biasanya melebihi lebar col-lg-2. Ubah menjadi img-responsive sehingga menyusut sesuai kebutuhan..

<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