Question

我在StackOverflow中寻找了很多解决方案，但没有解决它，所以我希望有人能在这篇文章中直接找到我。

我正在为一个网页制作一个简单的navegation栏，我希望它能完全填满浏览器窗口的宽度，所以我给了它类.container-fluid，它在一台大电脑上工作得很好，但是当使用笔记本电脑时，.container-fluid内的元素溢出窗口，如下所示：

HERE

更好的看一下：

为什么会这样？

以下是代码：

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>

SASS

@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

中所做更改的笔

＆＃13;

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Bootstrap .container-fluid溢出

1 个答案: