3

我正在尝试在引导程序中创建一个容器，底部有一个按钮浮动在右侧。不幸的是，按钮离开了 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

4

2 回答 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>

方法二：

添加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>

于 2017-11-18T03:56:35.973 回答
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>

于 2017-11-18T02:06:35.457 回答