bootstrap 3.3.6 向左行 div 固定位置而不是向右 div 滚动
bootstrap 3.3.6 row left div fixed position instead of right div scrolling
我试过bootstrap3.3.6，其中一行包含两个div。我想固定向左 div 而不是向右 div 滚动。示例代码在这里，
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-3 col-xs-12">
This Left div is fixed.
</div>
<div class="col-md-9 col-xs-12">
This Right div is scrolling according to the content.
</div>
</div>
</div>
最好有一个bootstrap 3.3.6 per-define class usage 来完成这个任务。对于您的信息，有一些 div 可以存在于 .container-fluid class.
的左侧
我不再有兴趣使用下面这种 css，
.left-fixed-position{
position: fixed;
top: 0px;
left: 0px;
max-height: 100%;
width: 190px;
background-color: #eee;
overflow-y: scroll;
}
.right-side {
margin-left: 200px;
or
margin-left: 30%;
}
因为在这里，.right-side class 添加 css 属性 margin-left。这是由于响应问题引起的问题。
使用 Bootstrap 4 无需额外的 CSS 代码即可实现此目的。请试试。如果您只能使用 Bootstrap 3，请告诉我，我会为 Bootstrap 3 编写额外的 CSS 规则。希望对您有所帮助。
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-3 d-none d-md-block col-sm-12 position-fixed">
This Left div is fixed. This Left div is fixed. This Left div is fixed.
</div>
<div class="col-md-9 offset-md-3 col-sm-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scelerisque convallis euismod. Duis pretium tortor convallis, volutpat nunc a, dignissim arcu. Morbi elementum lacinia nisi id rutrum. Etiam ac velit sit amet urna aliquam volutpat eget nec neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas quis euismod libero. Aliquam venenatis varius quam, sed convallis tortor sagittis nec. Praesent odio eros, convallis et semper non, facilisis a dolor. Sed et ullamcorper quam, at consequat ante. Donec consectetur tellus sit amet gravida sodales. Nullam sollicitudin volutpat arcu a consectetur. Maecenas scelerisque laoreet interdum. Morbi quis libero accumsan, venenatis odio vitae, cursus arcu.
Curabitur facilisis, justo eu sollicitudin tempus, est diam consequat risus, quis posuere turpis dolor et magna. Phasellus et auctor ante. Aliquam dictum, augue ac iaculis tincidunt, magna ipsum fermentum nisi, quis convallis diam felis ut ipsum. Aenean sed sollicitudin ex. Praesent lorem quam, convallis sit amet tellus id, efficitur vestibulum magna. Quisque sodales turpis turpis, at pretium justo dictum vel. Fusce elementum ex sit amet porta convallis. Nunc mollis sem pharetra, dignissim nisi ut, molestie ante. Phasellus eget erat non nisi placerat pellentesque ac ut magna. Vestibulum ut augue aliquet, posuere dui vitae, iaculis urna. Nunc ullamcorper tellus ac erat sollicitudin volutpat. Duis dignissim quam massa, sed dictum dolor elementum at.
Phasellus tristique sapien faucibus, tristique odio eget, ullamcorper sapien. In aliquam ex nec ante fermentum tempus. Ut id blandit justo. Vestibulum vel nunc erat. Donec vitae ipsum eu leo tincidunt fringilla. Fusce ligula justo, consequat sed pretium vel, iaculis quis velit. Praesent et tincidunt lorem. Phasellus nec auctor ipsum. Vestibulum consequat lorem vitae sem sollicitudin, non scelerisque odio cursus. Nam vulputate, ex at semper finibus, nulla enim ornare felis, sed auctor turpis velit at mauris. Donec consequat mi metus, at molestie purus gravida nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.
Sed tempor ultricies nibh, a commodo purus ullamcorper vitae. Praesent placerat nibh id eros ullamcorper tempus. Vestibulum hendrerit ipsum ipsum, ac sagittis mauris accumsan vitae. Cras ut risus lorem. Aenean faucibus nec erat vitae pretium. Sed pretium diam sit amet diam accumsan viverra. Donec facilisis consectetur elit, in egestas ligula placerat id. Nunc sed volutpat nibh, ac efficitur ex. Curabitur neque ex, feugiat at enim id, pharetra suscipit mi. Nam ac imperdiet eros. Suspendisse convallis est quis nibh vestibulum congue. Donec mollis, velit in tincidunt sagittis, elit arcu pulvinar sapien, vitae egestas dolor magna nec nibh. Fusce vel efficitur est.
Cras suscipit lobortis lacus, vel mollis felis luctus eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque tellus enim, auctor ac tempus et, blandit in ipsum. Integer ornare, lectus ac euismod tristique, turpis diam faucibus felis, non semper est quam ac tortor. Curabitur pretium quam at mattis vehicula. Maecenas posuere tortor sit amet justo dictum, et congue diam tempus. Duis nunc quam, bibendum nec varius nec, suscipit ac nisi. Aenean purus dui, tempor at elementum fermentum, tempus ut risus. Morbi egestas sagittis rutrum. Fusce lobortis sem id metus fringilla, cursus blandit leo sagittis.
Ut nec bibendum eros, quis lobortis orci. Curabitur elementum dui orci, nec dictum tortor luctus eu. Vestibulum lacinia arcu quis leo tempus aliquet. Curabitur quis felis purus. Duis varius dignissim mauris, vitae ornare lacus vestibulum nec. Nullam lacinia dapibus magna, eget hendrerit augue mollis in. Aenean ac venenatis magna. Quisque ac tempus libero. Suspendisse cursus elit eget pharetra pharetra. Donec ultrices elementum elit, id suscipit dolor condimentum tempus.
Vivamus lobortis feugiat purus at finibus. Integer at nunc condimentum, dapibus odio rhoncus, sagittis sem. Cras sed posuere metus, sit amet fermentum ipsum. Maecenas nisi massa, feugiat aliquam eleifend nec, feugiat nec diam. Vestibulum ut est eu nulla pharetra luctus id facilisis felis. Pellentesque at malesuada odio, ac ultrices velit. Vestibulum quis vehicula magna, ut semper nulla.
Aenean vulputate felis id diam blandit dapibus. Quisque ac elit dui. Duis feugiat lacus elit, quis venenatis arcu interdum quis. Aenean lectus urna, aliquam in lobortis ut, gravida non leo. Fusce interdum nisl ac fringilla viverra. In commodo elit enim, non pretium mauris ullamcorper vitae. Cras suscipit ultrices eros venenatis ultricies. Etiam eu velit nec orci elementum ultricies.
Fusce eu sem ligula. Etiam faucibus venenatis semper. Integer sit amet tempor ipsum. Proin ultrices iaculis lectus, vitae ornare velit finibus et. Vestibulum consectetur porttitor augue nec consequat. Nulla porttitor justo ac erat malesuada, vitae condimentum massa posuere. Sed dictum pharetra ipsum, sed consequat ante volutpat in. Nunc nec cursus felis, in dictum ipsum. In in pretium libero.
Pellentesque condimentum eget mauris quis condimentum. Cras ut fringilla arcu. Pellentesque egestas finibus odio, vitae auctor felis sollicitudin eu. Nullam porttitor mi nec efficitur congue. Maecenas sit amet nisl ut est lacinia dapibus. Etiam volutpat diam ut lacus fringilla, vitae tempus felis auctor. Aliquam at placerat nulla. Nullam et accumsan odio. Donec luctus sapien sagittis rutrum cursus.
</div>
</div>
</div>
使用 CSS 使右侧 div 可垂直滚动，您可以使用下面的 javascript 使右侧 div 的高度与左侧相同。这使得 sit 可以在该尺寸下滚动。
function setRightColHeight()
{
var leftHeight = $("#leftdiv").height();
$("#rightDiv").height(leftHeight);
}
如果你想要相反的 w.r.t 左右，你可以交换它们。
我试过bootstrap3.3.6，其中一行包含两个div。我想固定向左 div 而不是向右 div 滚动。示例代码在这里，
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-3 col-xs-12">
This Left div is fixed.
</div>
<div class="col-md-9 col-xs-12">
This Right div is scrolling according to the content.
</div>
</div>
</div>
最好有一个bootstrap 3.3.6 per-define class usage 来完成这个任务。对于您的信息，有一些 div 可以存在于 .container-fluid class.
的左侧我不再有兴趣使用下面这种 css，
.left-fixed-position{
position: fixed;
top: 0px;
left: 0px;
max-height: 100%;
width: 190px;
background-color: #eee;
overflow-y: scroll;
}
.right-side {
margin-left: 200px;
or
margin-left: 30%;
}
因为在这里，.right-side class 添加 css 属性 margin-left。这是由于响应问题引起的问题。
使用 Bootstrap 4 无需额外的 CSS 代码即可实现此目的。请试试。如果您只能使用 Bootstrap 3，请告诉我，我会为 Bootstrap 3 编写额外的 CSS 规则。希望对您有所帮助。
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-3 d-none d-md-block col-sm-12 position-fixed">
This Left div is fixed. This Left div is fixed. This Left div is fixed.
</div>
<div class="col-md-9 offset-md-3 col-sm-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scelerisque convallis euismod. Duis pretium tortor convallis, volutpat nunc a, dignissim arcu. Morbi elementum lacinia nisi id rutrum. Etiam ac velit sit amet urna aliquam volutpat eget nec neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas quis euismod libero. Aliquam venenatis varius quam, sed convallis tortor sagittis nec. Praesent odio eros, convallis et semper non, facilisis a dolor. Sed et ullamcorper quam, at consequat ante. Donec consectetur tellus sit amet gravida sodales. Nullam sollicitudin volutpat arcu a consectetur. Maecenas scelerisque laoreet interdum. Morbi quis libero accumsan, venenatis odio vitae, cursus arcu.
Curabitur facilisis, justo eu sollicitudin tempus, est diam consequat risus, quis posuere turpis dolor et magna. Phasellus et auctor ante. Aliquam dictum, augue ac iaculis tincidunt, magna ipsum fermentum nisi, quis convallis diam felis ut ipsum. Aenean sed sollicitudin ex. Praesent lorem quam, convallis sit amet tellus id, efficitur vestibulum magna. Quisque sodales turpis turpis, at pretium justo dictum vel. Fusce elementum ex sit amet porta convallis. Nunc mollis sem pharetra, dignissim nisi ut, molestie ante. Phasellus eget erat non nisi placerat pellentesque ac ut magna. Vestibulum ut augue aliquet, posuere dui vitae, iaculis urna. Nunc ullamcorper tellus ac erat sollicitudin volutpat. Duis dignissim quam massa, sed dictum dolor elementum at.
Phasellus tristique sapien faucibus, tristique odio eget, ullamcorper sapien. In aliquam ex nec ante fermentum tempus. Ut id blandit justo. Vestibulum vel nunc erat. Donec vitae ipsum eu leo tincidunt fringilla. Fusce ligula justo, consequat sed pretium vel, iaculis quis velit. Praesent et tincidunt lorem. Phasellus nec auctor ipsum. Vestibulum consequat lorem vitae sem sollicitudin, non scelerisque odio cursus. Nam vulputate, ex at semper finibus, nulla enim ornare felis, sed auctor turpis velit at mauris. Donec consequat mi metus, at molestie purus gravida nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.
Sed tempor ultricies nibh, a commodo purus ullamcorper vitae. Praesent placerat nibh id eros ullamcorper tempus. Vestibulum hendrerit ipsum ipsum, ac sagittis mauris accumsan vitae. Cras ut risus lorem. Aenean faucibus nec erat vitae pretium. Sed pretium diam sit amet diam accumsan viverra. Donec facilisis consectetur elit, in egestas ligula placerat id. Nunc sed volutpat nibh, ac efficitur ex. Curabitur neque ex, feugiat at enim id, pharetra suscipit mi. Nam ac imperdiet eros. Suspendisse convallis est quis nibh vestibulum congue. Donec mollis, velit in tincidunt sagittis, elit arcu pulvinar sapien, vitae egestas dolor magna nec nibh. Fusce vel efficitur est.
Cras suscipit lobortis lacus, vel mollis felis luctus eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque tellus enim, auctor ac tempus et, blandit in ipsum. Integer ornare, lectus ac euismod tristique, turpis diam faucibus felis, non semper est quam ac tortor. Curabitur pretium quam at mattis vehicula. Maecenas posuere tortor sit amet justo dictum, et congue diam tempus. Duis nunc quam, bibendum nec varius nec, suscipit ac nisi. Aenean purus dui, tempor at elementum fermentum, tempus ut risus. Morbi egestas sagittis rutrum. Fusce lobortis sem id metus fringilla, cursus blandit leo sagittis.
Ut nec bibendum eros, quis lobortis orci. Curabitur elementum dui orci, nec dictum tortor luctus eu. Vestibulum lacinia arcu quis leo tempus aliquet. Curabitur quis felis purus. Duis varius dignissim mauris, vitae ornare lacus vestibulum nec. Nullam lacinia dapibus magna, eget hendrerit augue mollis in. Aenean ac venenatis magna. Quisque ac tempus libero. Suspendisse cursus elit eget pharetra pharetra. Donec ultrices elementum elit, id suscipit dolor condimentum tempus.
Vivamus lobortis feugiat purus at finibus. Integer at nunc condimentum, dapibus odio rhoncus, sagittis sem. Cras sed posuere metus, sit amet fermentum ipsum. Maecenas nisi massa, feugiat aliquam eleifend nec, feugiat nec diam. Vestibulum ut est eu nulla pharetra luctus id facilisis felis. Pellentesque at malesuada odio, ac ultrices velit. Vestibulum quis vehicula magna, ut semper nulla.
Aenean vulputate felis id diam blandit dapibus. Quisque ac elit dui. Duis feugiat lacus elit, quis venenatis arcu interdum quis. Aenean lectus urna, aliquam in lobortis ut, gravida non leo. Fusce interdum nisl ac fringilla viverra. In commodo elit enim, non pretium mauris ullamcorper vitae. Cras suscipit ultrices eros venenatis ultricies. Etiam eu velit nec orci elementum ultricies.
Fusce eu sem ligula. Etiam faucibus venenatis semper. Integer sit amet tempor ipsum. Proin ultrices iaculis lectus, vitae ornare velit finibus et. Vestibulum consectetur porttitor augue nec consequat. Nulla porttitor justo ac erat malesuada, vitae condimentum massa posuere. Sed dictum pharetra ipsum, sed consequat ante volutpat in. Nunc nec cursus felis, in dictum ipsum. In in pretium libero.
Pellentesque condimentum eget mauris quis condimentum. Cras ut fringilla arcu. Pellentesque egestas finibus odio, vitae auctor felis sollicitudin eu. Nullam porttitor mi nec efficitur congue. Maecenas sit amet nisl ut est lacinia dapibus. Etiam volutpat diam ut lacus fringilla, vitae tempus felis auctor. Aliquam at placerat nulla. Nullam et accumsan odio. Donec luctus sapien sagittis rutrum cursus.
</div>
</div>
</div>
使用 CSS 使右侧 div 可垂直滚动，您可以使用下面的 javascript 使右侧 div 的高度与左侧相同。这使得 sit 可以在该尺寸下滚动。
function setRightColHeight()
{
var leftHeight = $("#leftdiv").height();
$("#rightDiv").height(leftHeight);
}
如果你想要相反的 w.r.t 左右，你可以交换它们。