logo标签列表

如何在Bootstrap 4中让按钮向右浮动而不离开其容器？

twitter-bootstrapalignmentbootstrap-4right-align
3

我正在尝试使用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;
}

还有一个 Plunker 示例：https://plnkr.co/edit/9DUn1CUj0g6NPhEmqeB9?p=preview

check my answer below - Znaneswar
2个回答
3
由于按钮应用了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>

方法2： 在容器中添加overflow: hidden; 

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

你的回答更好：你引用了规格并给出了两个答案。太棒了！ - user1876508
2

当试图包装按钮标签时，这似乎是一个常见的问题。在容器中使用行可以解决此问题。在这里，您可以看到我正在使用 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接