我无法解决页脚问题。我想对页面进行响应式设计。当我将宽度设置为 970 或更小时，似乎我的所有元素都作为图层位于页面中心，并忽略所有先前的属性作为边距或填充。但是当宽度大于 970 时，一切看起来都是我想要的。
我认为当窗口宽度较低时，它应该简单地拉伸(stretch)或减小元素大小，而不是将所有内容都放在一个地方..
这是页面的代码。
<body>
<div id="main" class="section-library">
<div class="container">
<div class="row">
<div class="col-md-6">
<header class="section-library-header">
<h1 class="v1"><i class="ico-library"></i>Sections
Library</h1>
</header>
</div>
<div class="col-md-6">
<div class="section-library-perex">
<p><big>Find tutorials, documentation, downloads, troubleshooting acrticles, and more...</big></p>
</div>
</div>
</div>
</div>
<div id="slidingBox" class="hidden"></div>
<header class="section-library-header">
<div class="container">
<h2>
<span class="h4">Select Section</span>
<div id="mobileSelect" class="hidden">
<a class="popup-section-toggle" title="Select Section">
<span class="arrow"></span>
</a>
<span id="sectionTypeSelect"></span>
<select id="sectionTypes" onchange="changeText();">
</select>
</div>
<div id="additionalSelect" class="">
<img src="images/selectArrow.png">
<select id="selectWBttn" onchange="separateButtons(this);">
</select>
<ul>
</ul>
</div>
</h2>
<div class="header-image" id="main-icon">
<img src="" alt="...">
</div>
</div>
<div class="popup-section js-box-toggle-box">
<ul class="reset">
<li>
<a href="#">
<span class="profile-img">
<img src="" alt="...">
</span>
<span class="profile-name">Standardized:
</a>
</li>
<li>
<span class="profile-img">
<img src="" alt="...">
</span>
<span class="profile-name">Build-up:
<strong>Steel</strong></span>
</a>
</li>
<li>
<span class="profile-img">
</span>
<span class="profile-name">Standardized:
<strong>Timber</strong></span>
</a>
</li>
<li>
<span class="profile-img">
</span>
<span class="profile-name">Parametric:
<strong>Thin-Walled</strong></span>
</a>
</li>
</ul>
<ul class="reset">
<li>
<span class="profile-img">
<img src="" alt="...">
</span>
<span class="profile-name">Standardized:
<strong>Steel</strong></span>
</a>
</li>
<li>
<span class="profile-img">
<img src="" alt="...">
</span>
<span class="profile-name">Build-up:
<strong>Steel</strong></span>
</a>
</li>
<li>
<span class="profile-img">
</span>
<span class="profile-name">Standardized:
<strong>Timber</strong></span>
</a>
</li>
<!--<li>
<span class="profile-img">
</span>
<span class="profile-
name">Parametric: <strong>Thin-Walled</strong></span>
</a>
</li>-->
</ul>
</div>
</header>
<div class="container container-section-library">
<div class="row row-section-library">
<div class="col-md-3 col-left-section-library">
<div class="section-library-iconbox">
<ul class="reset crossroad-icons"
id="sectionCategories">
</ul>
</div>
<div class="box-std box-std--section-library white"
id="currentFilter">
<h4 class="std-header">Filter</h4>
<form data-ajax-form-action="xhr/selectbox.json"
class="form-std">
<div class="form-group">
<label for="inp-3-1">Region</label>
<div class="select">
<select name="inp-3-1" id="inp-3-1"
class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="inp-3-2">Manufacturer</label>
<div class="select">
<select name="inp-3-2" id="inp-3-2"
class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="inp-3-3">Standard</label>
<div class="select">
<select name="inp-3-3" id="inp-3-3"
class="form-control" data-provide="dependecy" data-
dependency="#inp-3-2">
</select>
</div>
</div>
<div class="form-group">
<label for="inp-3-4">Species</label>
<div class="select">
<select name="inp-3-4" id="inp-3-4"
class="form-control" data-provide="dependecy" data-dependency="#inp-3-3" data-
empty-value="Select...">
</select>
</div>
</div>
<p class="btn-wrap">
<button type="submit" class="btn btn-default
btn-submit">APPLY</button>
<button id="resetButton" type="reset"
class="btn btn-reset" onclick="sectionResult()">RESET</button>
</p>
</form>
</div>
<div class="col-md-9 col-main-section-library" id="sectionLayout">
<div class="row">
<div class="col-lg-8 col-middle-section-library">
<h1 id="titleBox"></h1>
<p class="perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non sollicitudin magna. Morbi vitae semper augue. Mauris semper tempor interdum. Cras eget volutpat metus, nec facilisis justo.</p>
</div>
</div>
<div class="row second">
<div class="col-lg-8 col-middle-section-library">
<div class="box-section-library">
<h2 id="select-section-series" class="title title-list"><span class="letter-list">A.</span> Select section series</h2>
<table class="table-section-library scrolled-tbody">
<thead>
<tr>
<th class="tsl-check active">
<label for="inp-all" class="inp-item" id="inp-1">
<input name="inp-all" id="inp-all" type="checkbox" onclick="checkAll();">
<span>inp-all</span>
</label>
</th>
<th class="tsl-series active" onclick="sortSeries(this)">
Series
<!-- <span class="sort sort up"></span> -->
<!-- <i class="arrow up" id="orderArrow"></i> -->
<img class="sort-arrow" src="images/arrowWhite.png">
</th>
<th class="tsl-standard" onclick="sortSeries(this)">Standard
<img class="hidden" src="images/arrowBlue.png">
</th>
<th class="tsl-manufacturer" onclick="sortSeries(this)">Manufacturer
<img class="hidden" src="images/arrowBlue.png">
</th>
<th class="tsl-region" onclick="sortSeries(this)" style="text-align: center;">Region
<img class="hidden" src="images/arrowBlue.png">
</th>
<th class="hidden" onclick="sortSeries(this)">Shape
<img class="hidden" src="images/arrowBlue.png">
</th>
<th class="hidden" onclick="sortSeries(this)">Manufacturing Type
<img class="hidden" src="images/arrowBlue.png">
</th>
</tr>
</thead>
<tbody id="sectionBody">
</tbody>
</table>
</div>
<div class="box-section-library box-section-library-material">
<span id="noResultWarn" class="hidden">No matches were found</span>
<p class="btn-wrap btn-wrap-inline">
<!-- btn-wrap btn-wrap-inline -->
<button type="button" class="hidden" id="addButton" disabled onclick='addSelectedProfiles(); hideShowButton();'>Add serie to the list</button> <!-- btn btn-default -->
</p>
</div>
</div>
<div class="col-lg-4 col-right-section-library">
<div class="section-library-detailbox">
<div>
<h3 id="Picture-title"></h3>
<figure class="sl-detail-box--image">
<img src="" alt="..." id="picture">
</figure>
<div class="inner-title">
<h4 id='innerTitle'></h4>
</div>
<div class="inner-footer">
<ul class="">
<li><strong id='foot-standard'></strong></li>
<li><strong id='foot-section'></strong></li>
</ul>
</div>
</div>
</div>
<p class="btn-wrap" ">
<button onclick=" showSerieButton(this)" type="button" class="btn btn-default btn-lg" id>Show serie</button>
</p>
</div>
</div>
<div class="hidden">
<!-- row section-library-selected-profiles -->
<div class="col-lg-8 col-middle-section-library">
<h2 class="h1">Selected series</h2>
<div class="selected-profiles-box" id="profileList">
</div>
<p class="btn-wrap">
<button type="button" class="btn btn-default btn-lg" id="showButton" onclick="changeLayout(); readTableXml();" disabled>Show sections</button>
</p>
</div>
</div>
<div id="accessBar">
<p class="btn-wrap">
<button type="button" class="btn btn-inactive" id="showSelected" onclick="showSelected(); changeLayout(); " disabled="">
<!-- btn btn-default btn-lg -->
Show selected Section
</button>
</p>
<p class="reset-btn">
<button type="button" class="btn btn-inactive-reset" id="resetSelected" onclick="resetAllChecked('sectionBody');" disabled>
Reset Selected
</button>
</p>
<p class="btn-top" onclick="toTop();" title="To top">
<img src="images/toTopA.png">
</p>
</div>
</div>
</div>
<div class="hidden" id="slidingBar">
<!-- row section-library-function-row -->
<div id="tablesScroll">
<div class="additional-scroll">
</div>
</div>
<div class="col-md-7 section-library-function-row-box">
<p class="btn-wrap">
<button id="selectedProfiles" class="btn btn-inactive" onclick="hideNotSelected()" disabled="">Show Selected Section</button> <!-- btn btn-white has-icon icon-eye -->
<button id="resetAllSelected" class="btn btn-inactive-reset" onclick="resetAllTableButton();" disabled=""><span>Reset Selected</span></button>
</p>
</div>
<div class="col-md-5 section-library-function-row-box">
<p class="btn-wrap" id="btnWrap1">
<button class="btn btn-white has-icon icon-arrange-h" onclick="arrangeColButton();" id="arrangeButton">Arrange table columns</button>
</p>
<!-- <p class="btn-top" onclick="toTop();" title="To top">
<img src="images/toTopA.png">
</p> -->
<p class="btn-wrap" id="btnWrap2">
<span class="title">Export:</span>
<a class="btn has-icon icon-pdf">PDF</a>
<a href="#" class="btn has-icon icon-xls" onclick="Exc(this);">XLS</a>
<!-- <span class="separator separator-v">|</span> -->
</p>
<p class="btn-wrap" id="btnWrap3">
<a href="#" class="btn has-icon icon-print">Print</a>
</p>
</div>
<div class="hidden" id="arrangeTable">
<table class="table-section-library table-horizontal">
<thead>
<tr id="arrangeColumns">
</tr>
</thead>
</table>
<a class="close" onclick="arrangeColButton();"></a>
</div>
</div>
</div>
<!-- ------------Footer begins----------------------- -->
<div class="footer info">
<div class="section-library-footer" onclick="visibleList('c')">
<div class="section-library-footer-header">
<div class="container">
<div class="row">
<div class="box-footer-header col-md-3">
<h3 class="title"><i class="ico-library"></i>Sections Library</h3>
</div>
<div class="box-footer-header col-md-4">
<h3 class="title">DUENQ</h3>
</div>
<div class="box-footer-header col-md-4">
<h3 class="title">DICKQ</h3>
</div>
</div>
</div>
</div>
<div class="section-library-footer-links">
<div class="container">
<div class="row">
<div class="sl-box-footer-links col-md-3">
<div class="inner">
<div class="inner-body">
<div class="inner-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa sit amet lectus
euismod cursus. Aenean orci metus, venenatis commodo mauris vel.</p>
<ul class="">
<li>Standardized: <strong>Steel</strong></li>
<li>Build-up: <strong>Steel</strong></li>
<li>Standardized: <strong>Timber</strong></li>
<li>Parametric: <strong>Thin-Walled</strong></li>
<li>Cold-formed: <strong>Steel</strong></li>
<li>Build-up: <strong>Timber</strong></li>
<li>Parametric: <strong>Timber</strong></li>
<li>Parametric: <strong>Massive</strong></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sl-box-footer-links col-md-4">
<div class="inner">
<div class="inner-body">
<div class="inner-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa sit amet lectus
euismod cursus.</p>
<ul class="links">
<li><a href="#">More information</a></li>
</ul>
</div>
</div>
<div class="illust">
<img src="">
</div>
</div>
</div>
</div>
<div class="sl-box-footer-links col-md-4">
<div class="inner">
<div class="inner-body">
<div class="inner-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa sit amet lectus
euismod cursus. Aenean orci metus, venenatis commodo mauris vel.</p>
<ul class="links">
<li><a href="#">More information</a></li>
</ul>
</div>
</div>
<div class="illust">
<img src="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="to-top-link">
<a class="js-to-top" onclick="toTop();">
<div class="arrow"></div>
<span class="text">Top</span>
</a>
</div>
<div class="container">
<div class="footer-top">
<div class="row">
<div class="col-md-2">
<h2 class="heading">Social</h2>
<div class="crossroad-social">
<ul class="reset">
<li><a class="facebook" href="#"><span class="sr-only">Facebook</span></a></li>
<li><a class="twitter" href="#"><span class="sr-only">Twitter</span></a></li>
<li><a class="google" href="#"><span class="sr-only">Google+</span></a></li>
<li><a class="linkedin" href="#"><span class="sr-only">LinkedIn</span></a></li>
<li><a class="youtube" href="#"><span class="sr-only">YouTube</span></a></li>
<li><a class="chat" href="#"><span class="sr-only"></span></a></li>
</ul>
</div>
</div>
<!-- /.col-sm-2 -->
<div class="col-md-5 col-lg-6">
<h2 class="heading">Products</h2>
<div class="row">
<div class="col-sm-4">
<ul class="reset links">
<li><a href="#">Maecenas id nunc</a></li>
<li><a href="#">Duis interdum dolor</a></li>
<li><a href="#">Vestibulum facilisis</a></li>
<li><a href="#">Aliquam justo</a></li>
<li><a href="#">Nam vitae arcu vulputate</a></li>
<li><a href="#">Aliquam varius diam eget</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="reset links">
<li><a href="#">Maecenas id nunc</a></li>
<li><a href="#">Duis interdum dolor</a></li>
<li><a href="#">Vestibulum facilisis</a></li>
<li><a href="#">Aliquam justo</a></li>
<li><a href="#">Nam vitae arcu vulputate</a></li>
<li><a href="#">Aliquam varius diam eget</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="reset links">
<li><a href="#">Maecenas id nunc</a></li>
<li><a href="#">Duis interdum dolor</a></li>
<li><a href="#">Vestibulum facilisis</a></li>
<li><a href="#">Aliquam justo</a></li>
<li><a href="#">Nam vitae arcu vulputate</a></li>
<li><a href="#">Aliquam varius diam eget</a></li>
</ul>
</div>
</div>
</div>
<!-- /.col-sm-6 -->
<div class="col-md-5 col-lg-4">
<div class="box-footer-contact">
<h2 class="heading">Contacts</h2>
<div class="row">
<div class="col-sm-6">
<p>
<strong></strong> <br>
</p>
<p>
</p>
</div>
<div class="col-sm-6">
<p>
<strong></strong> <br>
</p>
<p>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.footer-top -->
<div class="footer-copy">
<div class="row">
<div class="col-md-5">
<p></p>
</div>
<div class="col-md-7 right">
<ul class="reset menu">
<li><a href="#">Impressum</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Webshop</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</div>
</div>
</div>
<!-- /.footer-copy -->
</div>
<!-- /.container -->
</div>
</div><!-- /.container -->
<!-- ---------------------------------------------Footer ends------------------------------------------ -->
</div>
</div><!-- /#main -->
由于巨大的 css 文件，JsFiddle 真的很慢，对此我深表歉意。
我刚刚接触 HTML/CSS，所以我需要一些技巧。
最佳答案
看起来你写了很多 CSS 代码，你甚至覆盖了现有的网格结构类，不推荐这样做。 您可以在此处了解 RWD 的工作原理:https://developers.google.com/web/fundamentals/design-and-ux/responsive/
关于html - 当我更改窗口宽度大小时，为什么我的页脚会跳到页面中央？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54747668/