Question

基本上我做了一个黑色背景的页脚。我有3个Col-4，里面有各种信息。在桌面上它看起来很好，但在移动设备上，列堆栈，我想要的。当它们堆叠时，页脚不会更进一步，因此它下方有一个大的白色部分。我想知道是否有人可以看一看并提出建议。代码可能很乱，因为我是新手。

#footer {
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #000000;
	width: 100%;
 
}

<footer>
      <div class="container-fluid">
      <div class="row">
 <div class="col-sm-4 col-md-4">
<br>
<br>
Home<br>
Services<br>
Gallery<br>
About<br>
Contact
 </div>
  <div class="col-sm-4 col-md-4">
      <aligncenter>Check Out Our Other pages</aligncenter><br>
      <aligncenter2><img src="Facebook-icon.png" width="50" height="51" alt=""/><br>
    <img src="YouTube-icon-full_color.png" width="50" height="36" alt=""/><br>
    <img src="new-instagram-icon-topic.png" width="50" height="48" alt=""/></aligncenter2>
 </div>
 <div class="col-sm-4 col-md-4">
      <div class="container-fluid" 
<br>
<br>
<alignright>
Registered office<br>
 
14 Stott Court<br>
 
Tweedmouth<br>
 
Berwick-Upon-Tweed<br>
 
Northumberland<br>
 
TD152YP
</alignright>
      </div>

Answer 1

对于Bootstrap中的移动列，您可以更改

＆＃34; COL-SM - *＆＃34;

到你需要的值它只能在小屏幕上工作。

＆＃13;

#footer {
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #000000;
	width: 100%;
 
}

＆＃13;

<footer>
      <div class="container-fluid">
      <div class="row">
 <div class="col-sm-12 col-md-4">
<br>
<br>
Home<br>
Services<br>
Gallery<br>
About<br>
Contact
 </div>
  <div class="col-sm-12 col-md-4">
      <aligncenter>Check Out Our Other pages</aligncenter><br>
      <aligncenter2><img src="Facebook-icon.png" width="50" height="51" alt=""/><br>
    <img src="YouTube-icon-full_color.png" width="50" height="36" alt=""/><br>
    <img src="new-instagram-icon-topic.png" width="50" height="48" alt=""/></aligncenter2>
 </div>
 <div class="col-sm-12 col-md-4">
      <div class="container-fluid" 
<br>
<br>
<alignright>
Registered office<br>
 
14 Stott Court<br>
 
Tweedmouth<br>
 
Berwick-Upon-Tweed<br>
 
Northumberland<br>
 
TD152YP
</alignright>
      </div>

＆＃13;

Bootstrap Footer Columns堆叠和松开页脚颜色

1 个答案: