[英]How to make a button responsive in small screens?
.form-control { width: 30%; float: left; margin-left: 33%; } h1 { margin-top: 2px; } .card-block { padding-top: 3px; border-left: 5px solid #CCC; } .card { background: azure; } .container { margin-top: 10px; } body { background: lightgray; } #search { padding-top: 13%; }
<html> <head> <title>Wikipedia Viewer</title> </head> <body> <div id="search"> <h1 class="text-center">Wikipedia Viewer</h1> <input type="text" class="form-control" name="" placeholder="Search Wikipedia"> <button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button class="btn btn-primary">Random</button></a> </div> <script type="text/javascript" src="Wikipedia Viewer.js"></script> </body> </html>
即使在小屏幕上，如何使“隨機”按鈕保持在同一行？ 它與fontawesome圖標一起正常工作，但文本長度使其跳至下一行。 另外，如果有一種方法可以在其旁邊添加一個fontawesome圖標，並使它在較小的屏幕中停留在同一行（不需要），那也很好。
在按鈕類中使用btn-sm
<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
固定按鈕的位置：
button{
position:fixed;
}
這應該可以解決您的問題
將控件包裝在容器中，然后使用flexbox ：
.container {
display: flex;
}
HTML
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<div class="container">
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
</div>
JSFiddle演示： https ://jsfiddle.net/9vev9esr/4/
關於如何使此文本 CSS animation 在小屏幕上響應的任何想法？
[英]Any idea on how to make this text CSS animation responsive on small screens?
響應式菜單：如何在xs屏幕上使按鈕文字消失而不使圖標消失？
[英]responsive menu: how can I make button text but not icon disappear for xs screens?
針對 Internet Explorer 6 中響應式設計的小屏幕
[英]target small screens for responsive design in internet explorer 6
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.