在小屏幕上的下一行制作按鈕，但在 Bootstrap 4 中的大屏幕上保持在同一行

Question

我覺得這應該很簡單，但我似乎無法理解它：

我想創建一個帶有兩行文本和一個按鈕的粘性底部欄（本質上是一個 cookie 警告欄）。 在桌面上，我希望按鈕出現在句子旁邊，但在移動設備上，我希望它跳到下一行。

實現這一目標的好而簡單的方法是什么？

謝謝！

Answer 1

基本上，您row內使用帶有col的網格系統，並選擇您需要更改內容的大小。 這是使用引導程序的解決方案的鏈接： https : //codepen.io/DohaHelmy/pen/vYEjXzO

以下是沒有引導程序類但具有引導程序網格系統相同功能的解決方案。

 #cookies { background-color: #eee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 20px; } p { padding: 20px; } button { color: #fff; background-color: #357832; border: none; height: 30px; padding: 5px 20px; } @media (max-width: 576px) { #cookies { flex-direction: column; } }

 <div id="cookies"> <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p> <button>aciton</button> </div>