twitter-bootstrap - 如何让 bootstrap 4 中的按钮在不离开其所在容器的情况下向右浮动？

我正在尝试在 bootstrap 中创建一个容器，底部有一个按钮漂浮在右侧。不幸的是，按钮离开了 div。为什么会发生这种情况，我该如何防止这种情况发生？这是 HTML 的副本

<body>
  <div class="container">
    <p>
      ... 
    </p>
    <button type="button" class="btn btn-primary float-right">Primary</button>
  </div>
</body>

CSS

.container {
  border: 1px solid black;
}

还有一个笨蛋:https://plnkr.co/edit/9DUn1CUj0g6NPhEmqeB9?p=preview

最佳答案

因为按钮已应用float-right它会造成一些流出。引用:https://www.w3.org/TR/CSS21/visuren.html#x23

只需添加

<div style="clear: both;"></div>

在<button>之后

.container {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <p>
        Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum. 
      </p>
      
      <button type="button" class="btn btn-primary float-right">Primary</button>
      <div style="clear: both;"></div>
    </div>
  </body>

</html>

方法二:

添加overflow: hidden;至 container

/* Styles go here */

.container {
  border: 1px solid black;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <p>
        Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum. 
      </p>
      <button type="button" class="btn btn-primary float-right">Primary</button>
    </div>
  </body>

</html>

关于twitter-bootstrap - 如何让 bootstrap 4 中的按钮在不离开其所在容器的情况下向右浮动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47361503/

twitter-bootstrap - 如何让 bootstrap 4 中的按钮在不离开其所在容器的情况下向右浮动？

上一篇：twitter-bootstrap - 如何在 Open Layers 中创建新的缩放按钮？

下一篇：html - Chart.js 图表在 ngIf 中时不显示。