Menggunakan Bootstrap, saya memiliki kolom grid class="col-lg-3" yang saya ingin menempatkannya di posisi:tetap sedangkan yang lain .col-lg-9 adalah posisi normal (dapat gulir melalui halaman).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Dengan cara yang sama seperti kolom kiri dalam LifeHacker.com Anda akan melihat bahwa bagian kiri adalah tetap namun aku gulir meskipun halaman.
Saya menggunakan bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterasi Ihab's jawaban, hanya menggunakan position:fixed
dan bootstraps col-offset
anda don't harus spesifik pada lebar.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Berikut solusi di sini [
][1],<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
Saya memodifikasi beberapa css untuk bekerja sempurna:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Terima kasih @Lowkase untuk berbagi solusinya.
di Bootstrap 3 class="membubuhkan"
bekerja, tapi di Bootstrap 4 tidak.
Saya memecahkan masalah ini dalam Bootstrap 4 dengan class="lengket-top"
(menggunakan posisi: tetap
di CSS memiliki masalah sendiri)
kode akan menjadi sesuatu seperti ini:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Diperbarui untuk Bootstrap 4
Bootstrap 4 sekarang termasuk posisi-tetap
kelas untuk tujuan ini sehingga tidak perlu untuk tambahan CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
Ini bekerja untuk saya dan memecahkan masalah dengan layar kecil.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
Hanya melakukan ini :
<div class="row" style="position:fixed;">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-3"> //
<div class="col-lg-9">
Normal scrollable content
</div>
</div>