我怎样才能让引导程序4中的按钮浮起来而不离开它所在的容器？

问题描述：

我正在尝试在自举中创建一个容器，并在底部浮动右侧的按钮。不幸的是，按钮离开了div。为什么会发生这种情况，我该如何防止这种情况？下面是HTML我怎样才能让引导程序4中的按钮浮起来而不离开它所在的容器？

<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

检查以下 – Znaneswar

答

由于按钮已申请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="[email protected]" 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="[email protected]" 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;到container

/* Styles go here */ 
 

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

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]" 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="[email protected]" 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

答

这似乎试图总结按钮标签时，是一个正常的问题。在容器中使用一行可以解决这个问题。在这里你可以看到我正在使用col-md-12这是行，但你可以改变它取决于你的设计。

// Code goes here

/* Styles go here */ 
 

 
.container { 
 
    border: 1px solid black; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]" 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="[email protected]" 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>

我怎样才能让引导程序4中的按钮浮起来而不离开它所在的容器？

相关推荐