[英]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.