我怎樣才能讓引導程序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

來源

2017-11-18 user1876508

檢查以下 – 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>

來源

2017-11-18 03:56:35 Znaneswar

我的回答你有一個更好的答案：你舉的規格，並給出了兩個答案。好樣的！ – 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>

來源

2017-11-18 02:06:35 Obed

我怎樣才能讓引導程序4中的按鈕浮起來而不離開它所在的容器？

回答

相關問題