引导页脚输入组未拉伸以适合页面
Posted
技术标签:
【中文标题】引导页脚输入组未拉伸以适合页面【英文标题】：Bootstrap footer input group not stretching to fit page 【发布时间】：2021-01-19 18:50:00 【问题描述】：我已在尝试使用 socketio 制作的聊天应用中添加了页脚。
我遇到的问题是markdown输入组没有延伸到页面。
如果我从“footerr”类中取出position: fixed;，那么它会拉伸以适应，但不再位于页面底部。
理想情况下，页脚不会越过侧边栏，会自动调整大小，向右对齐并适合页面的整个“主要”部分。
谁能帮忙？
https://jsfiddle.net/fxyhgz7t/
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action sidebar">Dashboard</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Shortcuts</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Overview</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Events</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Profile</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Status</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e)
e.preventDefault();
$("#wrapper").toggleClass("toggled");
);
</script>
</body>
</html>
【问题讨论】：
.footerr 是错字吗？
不，不是。我正在测试不同的意见，这是其中之一
【参考方案1】：
您只需将width: 100%; 添加到.footerr
/*!
* Start Bootstrap - Simple Sidebar (https://startbootstrap.com/templates/simple-sidebar)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
.togglebutton
color:#FAFAFF;
background-color: #B0B5B3;
.sidebar
background-color: #353B3C!important;
color: #C6C7C4;
.topbar
background-color: #22577A!important;
color: #EEF0F2;
.mainpage
background-color: #EEF0F2!important;
.message_remote
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
background-color: #A2999E!important;
.message_local
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
background-color: #22577A!important;
color:#FAFAFF;
.tooltip
display:inline-block;
position:relative;
border-bottom:1px dotted #666;
text-align:left;
.tooltip h3 margin:12px 0;
.tooltip .right
min-width:200px;
max-width:400px;
top:50%;
left:100%;
margin-left:20px;
transform:translate(0, -50%);
padding:0;
color:#EEEEEE;
background-color:#444444;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
.tooltip:hover .right
visibility:visible; opacity:1;
.tooltip .right img
width:400px;
border-radius:8px 8px 0 0;
.tooltip .text-content
padding:10px 20px;
.tooltip .right i
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 12px;
html, body
font-family: 'Catamaran', sans-serif;
#wrapper
overflow-x: hidden;
#sticky-footer
flex-shrink: none;
.footerr
position: fixed;
bottom: 0;
z-index: 1030;
width: 100%;
#sidebar-wrapper
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
#sidebar-wrapper .sidebar-heading
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
#sidebar-wrapper .list-group
width: 15rem;
#page-content-wrapper
min-width: 100vw;
#wrapper.toggled #sidebar-wrapper
margin-left: 0;
@media (min-width: 768px)
#sidebar-wrapper
margin-left: 0;
#page-content-wrapper
min-width: 0;
width: 100%;
#wrapper.toggled #sidebar-wrapper
margin-left: -15rem;
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action sidebar">Dashboard</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Shortcuts</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Overview</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Events</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Profile</a>
<a href="#" class="list-group-item list-group-item-action sidebar">Status</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e)
e.preventDefault();
$("#wrapper").toggleClass("toggled");
);
</script>
</body>
</html>【讨论】：
【参考方案2】：@Jaocampoo 的回答应该有效。更好的解决方案是在页脚中添加一个容器流体类，同时保留 .footerr 类。
【讨论】：
以上是关于引导页脚输入组未拉伸以适合页面的主要内容，如果未能解决你的问题，请参考以下文章