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

Question

我正在尝试在 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

Answer 1

这似乎是尝试包装按钮标签时的一个正常问题。在容器内使用一行可以解决这个问题。在这里你可以看到我正在使用行内的 col-md-12，但你可以根据你的设计更改它。

// Code goes here

/* Styles go here */

.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" />
   
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <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>
      </div>
    </div>
  </body>

</html>

Answer 2

因为按钮已应用 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>

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

How can I get a button in bootstrap 4 to float right without leaving the container it's in?

alignment

right-align

twitter-bootstrap

bootstrap-4