文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap页脚输入组未拉伸以适应页面

问Bootstrap页脚输入组未拉伸以适应页面
EN

Stack Overflow用户

提问于 2020-10-05 04:27:49

回答 2查看 58关注 0票数 0

我已经在一个聊天应用上添加了一个页脚，我正在尝试用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>

twitter-bootstrap

footer

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-05 04:43:49

您只需要在.footerr中添加width: 100%;

/*!
 * 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>

票数 0

Stack Overflow用户

发布于 2020-10-05 04:53:07

@Jaocampoo的答案应该有效。更好的解决方案是将容器流体类添加到页脚，同时保留.footerr类。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64199567

复制

相似问题

问Bootstrap页脚输入组未拉伸以适应页面
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap页脚输入组未拉伸以适应页面EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap页脚输入组未拉伸以适应页面
EN