Bootstrap .container-fluid溢出

Question

我在StackOverflow中寻找了很多解决方案，但是没有一个解决方案，所以我希望有人可以在这篇文章中直接让我高兴。

我正在为网页制作一个简单的导航栏，并且希望它完全填满浏览器窗口的宽度，因此我给它提供了.container-fluid类，它在大型计算机上可以完美地工作，但是当使用笔记本电脑中，.container-fluid内部的元素像这样使窗口溢出：

更好看的是：

为什么会这样呢？

这是代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>__codekup__</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
            integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
            crossorigin="anonymous" />

        <link rel="stylesheet" href="main.css" type="text/css" />
    </head>
    <body>

        <div class="header container-fluid">
            <div class="row align-items-center justify-content-between">
                <div class="col-sm-2 text-center">
                    <h1>Pliki</h1>
                </div>
                <div class="col-sm-2">
                    <div class="row align-items-center">
                        <div class="col-sm-6 text-center">
                            Instructions
                        </div>
                        <div class="col-sm-6 text-center">
                            <button type="button" class="btn btn-outline-primary pull-right">
                                Download Game
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main"></div>

        <!-- Bootstrap dependencies and jQuery library -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
            integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
            integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
            integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
            crossorigin="anonymous"></script>

        <script src="main.js" type="text/javascript"></script>
    </body>
</html>

上海社会科学院

@import url('https://fonts.googleapis.com/css?family=Lato');

$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);

.header {
    background-color: $bg-color;
    height: 70px;
    color: $primary-color;

    .row {
        height: 100%;
    }

    h1 {
        font-family: Courier, sans-serif;
    }

    .btn {
        color: $primary-color;
        border-color: $primary-color;
        font-family: Lato, sans-serif;

        &:hover {
            color: $bg-color;
            background-color: $primary-color;
        }
    }
}

.main {
    background: black;
}

JAVASCRIPT

$(document).ready(function () {
    var h = window.innerHeight;
    $('.main').css('height', h + 'px');
});

Answer 1

包装按钮的.col-sm-2类太窄而无法容纳内容。 我会删除.col-*从那些列类，删除.row从按钮的父母和使用.d-flex相反，应用margin按钮和填充到之间.header .row （匹配类似于您之前曾经拥有过-尽管没有必要）。

这是您在scss https://codepen.io/mcoker/pen/qjxmLr中所做的更改的笔

 $(document).ready(function () { var h = window.innerHeight; $('.main').css('height', h + 'px'); });

 @import url("https://fonts.googleapis.com/css?family=Lato"); .header { background-color: #21252b; height: 70px; color: #76c888; } .header .row { height: 100%; padding: 0 30px; } .header h1 { font-family: Courier, sans-serif; } .header .btn { color: #76c888; border-color: #76c888; font-family: Lato, sans-serif; margin-left: 1em; } .header .btn:hover { color: #21252b; background-color: #76c888; } .main { background: black; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>__codekup__</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" /> <link rel="stylesheet" href="main.css" type="text/css" /> </head> <body> <div class="header container-fluid"> <div class="row align-items-center justify-content-between"> <div> <h1>Pliki</h1> </div> <div> <div class="d-flex align-items-center"> <div> Instructions </div> <div> <button type="button" class="btn btn-outline-primary pull-right"> Download Game </button> </div> </div> </div> </div> </div> <div class="main"></div> <!-- Bootstrap dependencies and jQuery library --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="main.js" type="text/javascript"></script> </body> </html>

Bootstrap .container-fluid溢出

问题描述

1 个解决方案

解决方案1
0 2017-06-29 21:42:31

Bootstrap .container-fluid溢出

问题描述

1 个解决方案

解决方案1 0 2017-06-29 21:42:31

解决方案1
0 2017-06-29 21:42:31