我对这个网站有一个非常不同的方法。
我有一个主模板页面，里面有一行和两列，左边是 col-md-2，右边是 col-md-10，旁边是 col-md-2。
在 col-md-2 中，我有一个面板 Accordion ，它动态抓取各个页面并将它们加载到 col-md-10 列中。
我不确定是否有更好的方法从其他 html 文件中加载部分，所以请让我知道，因为我这样做的方式可以更容易地完成？？。
问题是，当我向 col-md-2 添加一个最小宽度，然后您减小浏览器大小时，col-md-10 列落在 col-md- 的下方和左侧2.
我想给它们一个最小宽度，但要保持彼此相邻，并保持响应。
不幸的是，目前我无法在代码片段中添加额外的页面，因为我只能使用一个 html 页面，而且我只能包含模板页面，而不是另一个页面来准确显示模板页面中的动态加载，所以我刚刚输入了一些随机段落。我还包含了 jquery 片段以显示它如何加载到我的模板页面中。
您可能无法从我的代码中解决这个问题，但希望我的解释能说明一些问题...
$(function () {
// listen on menu
$('a[data-parent="#accordion"]').on('click', function(e) {
// in this way you get the htmlref ref, i.e.: account.html, media.html, privacy.html
if ($(this).closest('.panel-heading').siblings('#collapseOne').is('.panel-collapse.in')) {
// sub menu closed
} else {
// sub menu open
var link = $(this).data('htmlref');
// before call the ajax......disable menu:
$('a[data-parent="#accordion"]').attr('disabled', 'disabled');
$('.load-content').load(link, function() {
// when ajax complete.....enable menu
$('a[data-parent="#accordion"]').removeAttr('disabled');
});
}
});
// listen on submenu items
$('.list-unstyled li a').on('click', function(e) {
//e.preventDefault();
//alert('Sub menu link clicked: ' + $(this).text());
})
});html,
body {
background-color: #ccc;
font-size: 14px;
}
/* General styles */
.container {
background-color: #000;
font-family: 'Lato', verdana, sans-serif;
width: 1530px;
margin: 0 auto;
}
.load-content {
border-left: 1px solid #4d4d4d; min-width: 1170px;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
.primary-header .col-md-12 {
color: #fff;
border-bottom: 6px solid #fff;
}
.primary-header h1 {
padding: 30px 0;
font-size: 3.6em;
font-weight: 400;
}
.sidebar-section {
padding-left: 0;
padding-right: 0;
background-color: #fff;
min-width: 250px;
}
#accordion {
border: 0;
}
.panel {
border-radius: 0 !important;
border: 0;
font-family: 'Lato', Arial, sans-serif;
font-weight: 400;
box-shadow: none;
}
.panel-group {
border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff; margin-bottom: 0;}
.panel-group .panel+.panel {
margin-top: 0px !important;
border-top: 1px solid #ccc
}
.panel.panel-default.custom .panel-heading {
background: #fff;
color: #000;
border-color: #fff
}
.panel-heading {
padding-top: 20px;
padding-bottom: 20px;
}
.panel-heading h4.panel-title {
border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}
.panel-heading h4.panel-title a: link {
margin-left: 10px;
text-decoration: none;
font-weight: bold;
font-size: 1.8em
}
.panel-heading h4.panel-title a:active {
color: #fff
}
.panel-heading h4.panel-title a:hover {
color: #FF5500
}
.panel-heading.collapsed {
background-color: #222222;
}
.panel-body {
/* padding-top: 2px !important; padding-bottom: 0px !important; */
padding: 0px !important;
border: 0
}
.panel-body ul {
margin: 0;
padding: 0
}
.panel-body ul li {
padding: 20px 0 !important;
border-bottom: 1px solid #ccc;
font-size: 1.6em
}
.panel-body ul li:last-child {
border-bottom: 0
}
.panel-body ul a {
color: #1f1f1f
}
.panel-body ul li a:link {
margin-left: 40px !important;
color: #1f1f1f
}
.panel-body ul li a:active {
color: #fff
}
.panel-body ul li a:hover {
text-decoration: none;
color: #FF5500
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
border: 0 !important;
padding: 0
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- **********************************
following functionality for the accordion referencing to load individual
body of parent links
************************************
-->
<!-- script for navigation load of individual body sections -->
<script src="accordion.js"></script>
<div class="container main">
<div class="row">
<div class="primary-header">
<div class="col-md-12">
<h1>Website</h1>
</div>
</div>
<div class="col-md-2 sidebar-section">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="account.html" href="#collapseOne" name="collapseOneAccount">
Account</a></h4>
</div>
</div>
</div>
<!-- end of panel accordion -->
</div>
<!-- end of sidebar-section-->
<div class="col-md-10 load-content">
<!--
**************************************
ajax load in individual page body's using accordion.js
**************************************
-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut velit cursus, dapibus nisi et, facilisis metus. Vestibulum id volutpat magna. Aliquam id enim vel turpis auctor semper blandit nec nisl. Integer a turpis lacus. Etiam vestibulum dolor pellentesque
velit tristique ultrices. Curabitur sit amet mollis quam. Praesent lacinia nibh sit amet feugiat mollis. Curabitur nulla arcu, placerat vel orci et, fermentum molestie erat. Ut gravida, risus volutpat tempus aliquam, velit elit interdum dui, quis
porta justo enim at diam. Aenean non facilisis erat. Cras ullamcorper mi eget neque sodales, at rutrum dui ullamcorper. Etiam sodales purus tristique justo luctus interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur
fringilla dictum mi, non facilisis magna elementum non. Phasellus non ex sed neque pharetra finibus eget quis orci. Suspendisse sodales non neque eu fringilla. Donec tempor mi at tortor mollis, vitae vestibulum neque fermentum. Nunc porttitor
ullamcorper dolor, vel consectetur nisi pharetra vel. Vestibulum mauris purus, dignissim eget elit et, finibus sodales nibh. Donec vel ipsum interdum mi varius viverra. Nullam tincidunt sit amet est quis efficitur. Cras nec ultricies turpis, id
laoreet lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet tellus sed risus luctus fringilla. Nulla viverra leo quis neque condimentum tincidunt. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Morbi feugiat, dui vel facilisis gravida, dui neque suscipit magna, ut gravida ex tellus vitae dolor. Proin id massa mauris. Pellentesque a condimentum metus, in mollis lorem. Ut aliquam
enim a metus volutpat, quis feugiat eros elementum. Curabitur malesuada orci at tortor lobortis, non ultrices purus finibus. Sed sit amet risus vel nunc scelerisque consectetur. Nullam non pulvinar diam. Vestibulum iaculis vulputate enim, at pellentesque
magna venenatis in. In ultricies, nisl vel scelerisque lacinia, purus diam vehicula mi, nec imperdiet diam nisl at lacus. In hac habitasse platea dictumst. Proin in mattis augue. Sed elementum dignissim sem. Integer facilisis, ex quis fermentum
sodales, dolor enim volutpat ex, at dictum ante eros et mauris. Nam fermentum efficitur nisl, ac volutpat tellus feugiat sit amet. Nulla in magna fringilla, porta leo at, auctor ex. Sed at suscipit ante. Maecenas ac massa in turpis laoreet sagittis
non ac urna. Maecenas ultrices, neque nec ultrices tincidunt, purus libero dictum ante, eget molestie sapien quam nec ante. In hac habitasse platea dictumst. Fusce sit amet porttitor nisi. Phasellus quis lectus ac augue tempor mattis et in purus.
Ut consequat ullamcorper massa, ut tincidunt dui imperdiet sed. Nunc massa erat, pellentesque ut dui sit amet, molestie semper eros. Aenean erat felis, feugiat non risus finibus, convallis lacinia libero. Donec pulvinar feugiat magna, nec varius
nisl. Suspendisse velit ipsum, posuere sed consectetur sit amet, facilisis sed dui. Ut congue purus justo, ut malesuada nisi luctus eu. Phasellus imperdiet feugiat eros ut semper. Donec luctus ullamcorper aliquet. Nulla scelerisque ipsum orci,
id egestas risus tempor in. Sed sed volutpat libero. Nullam lobortis erat vel justo pulvinar pharetra. Etiam ex erat, volutpat ac sapien sed, placerat elementum mi. Ut et volutpat elit. Morbi vestibulum varius malesuada. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Donec luctus in sem ut viverra. Quisque vitae suscipit arcu. Mauris pretium velit sed erat venenatis commodo. Curabitur eu lobortis quam. Praesent vitae nulla eu sem tempor mattis.
In interdum lorem vel ligula volutpat fringilla. Cras venenatis justo a nisi fringilla, vitae imperdiet mi sagittis. Nulla efficitur lorem eget dui dignissim, sit amet mollis urna sodales. Morbi vel hendrerit erat. Donec ligula augue, dictum ut
ligula quis, finibus ullamcorper tortor. Mauris at tempor ex. Vestibulum dapibus lacinia aliquam. Nulla nec risus est. Nullam in lacus erat. Aenean consectetur, nunc quis sodales ullamcorper, urna dui elementum orci, eget molestie mauris orci
ultrices ipsum. Sed et accumsan augue, sed rutrum odio. Aenean eu suscipit nunc, quis pulvinar erat. Fusce vulputate sollicitudin lectus, vitae mattis lorem lobortis in. Quisque dictum sit amet ligula id convallis. Donec vel ex at purus consectetur
lacinia. Curabitur aliquam eu elit quis lobortis. Aliquam erat volutpat. Morbi efficitur dignissim euismod. Cras nec feugiat augue. Curabitur at placerat est. Sed vestibulum vestibulum iaculis. Aliquam sodales diam est, ut finibus velit pulvinar
non. Proin vulputate tincidunt neque, et viverra nulla finibus ac. Phasellus vehicula leo mauris, at vulputate justo tempor vel. Duis sit amet auctor felis. Aenean lorem augue, tempor vitae accumsan in, ultricies et tortor. Donec nulla ligula,
eleifend scelerisque augue vitae, tincidunt commodo urna. Integer est sem, pulvinar eget turpis vitae, congue convallis dolor. Duis in tristique neque, a feugiat urna. Donec cursus metus vel suscipit mattis. Nunc volutpat blandit ante, et suscipit
sem tincidunt at. Etiam metus ipsum, bibendum in nunc ac, tincidunt tristique libero. In hac habitasse platea dictumst. Aenean id urna consequat, molestie ex id, dignissim magna. Vivamus nec orci risus. Vivamus tempus luctus tincidunt. Donec a
sollicitudin massa, eu maximus augue. Maecenas rutrum leo id elit vehicula facilisis. Nam non accumsan nibh. Maecenas quis sodales leo. Etiam quis leo eros. Etiam tristique rutrum pulvinar. Integer libero tellus, maximus vitae nulla at, aliquam
consequat leo. In pretium eu elit eu aliquet. Proin varius ante quis nulla pulvinar, id dictum odio pellentesque. Cras vitae dignissim arcu. Aliquam quis tellus vel elit ullamcorper condimentum. Etiam rhoncus, est quis consequat accumsan, quam
diam convallis ante, sed malesuada ipsum nisl sed mauris. Mauris non arcu nec nisl sodales auctor porttitor a lacus. Quisque quis hendrerit est. Sed eget eros id metus bibendum imperdiet quis at ante. Nam sed leo at velit scelerisque finibus eu
at ante. Ut mi metus, laoreet ac justo non, tristique bibendum magna. Praesent posuere porttitor venenatis. Duis eu sagittis velit. Curabitur rhoncus rhoncus lectus, sit amet ullamcorper lorem gravida a. Nunc ullamcorper ipsum nec neque consectetur
lacinia. Suspendisse ullamcorper augue sed leo elementum posuere. Praesent accumsan, dui sit amet tristique pharetra, magna dui dapibus turpis, sit amet iaculis sapien nibh vitae lectus. Aliquam bibendum enim non purus interdum, ac tristique dui
congue. Phasellus vehicula, magna quis volutpat mattis, arcu ligula faucibus neque, a volutpat lacus erat non libero. Sed id tincidunt tellus. Proin venenatis elit risus, nec tempor diam tristique eget. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Donec volutpat nisi odio, sit amet viverra ligula pellentesque commodo. Pellentesque lacinia efficitur sodales. Duis ultricies vulputate neque, ac dignissim quam aliquam eget. Curabitur sagittis justo dui, vitae sollicitudin
diam facilisis at. Integer nec magna luctus, condimentum ex quis, efficitur metus. Etiam ex sem, venenatis nec facilisis in, lacinia ut leo. Phasellus laoreet lobortis justo eu tempor. Aenean cursus neque vel dapibus laoreet. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Sed a scelerisque mauris. Proin ac urna et tellus hendrerit mollis. Curabitur sed purus eu dui condimentum dignissim. Duis lacinia iaculis sem feugiat vulputate. Pellentesque convallis semper eros nec malesuada.
Integer turpis lorem, mollis non nisi a, elementum venenatis sem. Integer risus neque, rhoncus et auctor sit amet, malesuada quis nunc. Donec consectetur dolor dolor, eu varius eros accumsan sit amet. Fusce semper nibh ac tortor convallis, eget
condimentum leo posuere. Donec nulla lorem, ultricies id ultricies quis, tincidunt nec lorem. Fusce volutpat quam vitae mi tincidunt, quis imperdiet nibh tempor. Integer et arcu sagittis, pulvinar orci vel, consequat leo. In ornare augue turpis,
vel ultricies nulla suscipit quis. Nulla bibendum lorem at laoreet dapibus. Fusce massa eros, consectetur eu sollicitudin vitae, semper a velit. Vestibulum ex nibh, dictum vulputate volutpat non, condimentum sit amet est. In elementum risus et
enim suscipit eleifend. Morbi sed risus vel urna convallis vulputate vitae nec urna. Morbi pulvinar ultrices luctus. Pellentesque in ex sed augue maximus gravida ac vel lacus. Pellentesque ac elit sit amet mauris tristique tempus non vel risus.
Donec viverra porta quam, et efficitur odio mollis id. Praesent iaculis lorem mauris, nec pretium lacus pulvinar vel. Maecenas vitae nulla arcu. Morbi condimentum vestibulum metus vitae pellentesque. Curabitur bibendum mauris eros, imperdiet lobortis
odio maximus eget. Aenean rutrum massa quam, in eleifend nisl euismod quis. Integer non leo a eros condimentum rutrum. Morbi et dolor in magna dignissim blandit. Nam et consectetur enim. Etiam non augue vel felis consequat eleifend in at ligula.
Integer vestibulum tempor imperdiet. Donec nec pulvinar justo. Nunc quis interdum diam. Nam erat quam, condimentum ut consectetur sit amet, convallis ut velit. Duis in convallis ex. Duis felis arcu, dignissim a felis non, commodo consequat massa.
Praesent blandit, mauris vel suscipit blandit, ex velit faucibus est, non laoreet nisl odio a mi. Maecenas eget neque lacus. Nullam quis enim pretium, dictum libero eget, volutpat nunc. Proin ullamcorper lectus vitae magna rutrum imperdiet. Vivamus
ac mollis erat, sit amet tristique nisl. Maecenas porttitor, augue a volutpat laoreet, dui dui congue ante, quis iaculis orci sapien et mi. Curabitur felis quam, placerat eget porta efficitur, finibus vel lorem. Nulla facilisi. Vivamus gravida
justo sit amet tellus elementum, sit amet porta neque convallis. Aenean nunc est, tempus in molestie at, lacinia in arcu. Quisque porttitor dolor ac condimentum fringilla. Vivamus libero elit, volutpat a urna ultrices, congue varius libero. Praesent
in elit ornare, consectetur sapien sed, semper elit. Donec ligula odio, eleifend eget mauris vitae, dapibus feugiat odio. Vivamus libero ipsum, feugiat eget aliquet id, dapibus sit amet urna. Vestibulum ultricies posuere dolor non placerat. Pellentesque
dictum at libero vel fringilla. In efficitur arcu sapien, blandit ullamcorper enim ornare vitae. Etiam vel lacinia nisl. Mauris scelerisque lorem magna, a malesuada sapien fringilla semper. Nunc blandit pellentesque convallis. Proin vehicula placerat
augue vitae convallis. Vestibulum maximus justo velit, non tristique ipsum pretium et. Nulla eget porta tortor, non scelerisque tellus. In ac dui et ex eleifend volutpat. Quisque pharetra mauris turpis, eget vehicula nisl vehicula in. Donec maximus,
dolor quis euismod tempus, tellus sapien feugiat massa, non ornare lorem orci ut mauris. Fusce rhoncus velit sit amet laoreet facilisis. Vestibulum id consequat risus, at maximus mauris. Duis vitae egestas velit. Integer mattis mauris nec nisi
dignissim, id placerat felis volutpat. Nullam rutrum nisl ac pulvinar accumsan. Sed eu lorem id sapien dapibus volutpat ut nec metus. Fusce eu tellus eros. Vivamus nec arcu in risus dictum feugiat ac non ante. Nullam nec blandit lorem, in molestie
lorem. Nullam facilisis placerat feugiat. Phasellus lobortis vestibulum lectus at condimentum. Phasellus tristique fringilla leo ac consectetur.
</p>
</div>
<!-- end of load content -->
</div>
<!-- end of row -->
</div>
<!-- end of main container -->最佳答案
与 col-md-2 一起添加类 col-sm-2 和 col-xs-2 因此当您调整屏幕大小时 sm(small) 或 xs(extra small) 将被触发并且
确保通过添加 col-sm-10 和 col-xs-10 相应地修改 col-md-10 元素，以便这些列在所有屏幕尺寸上都保持相邻
关于jquery - 将最小宽度应用于 Bootstrap 列有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36942947/