如何在小屏幕上使按钮响应？
[英]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>
How can I make that Random button to stay in the same line, even in small screens? 
即使在小屏幕上，如何使“随机”按钮保持在同一行？ It works fine with fontawesome icons but the text length makes it jump to the next line. 它与fontawesome图标一起正常工作，但文本长度使其跳至下一行。 Also, it would be nice if there is a way to add a fontawesome icon next to it and make it stay in the same line in smaller screens (not required). 另外，如果有一种方法可以在其旁边添加一个fontawesome图标，并使它在较小的屏幕中停留在同一行（不需要），那也很好。
3 个解决方案
解决方案1
1 2017-08-08 16:20:21
Try this 尝试这个
Use btn-sm in button class 在按钮类中使用btn-sm
<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
解决方案2
0 2017-08-08 16:18:24
make the position of button fixed: 固定按钮的位置：
button{
position:fixed;
}
This should solve your problem 这应该可以解决您的问题
解决方案3
0 已采纳 2017-08-08 16:19:27
Wrap the controls in a container and use flexbox : 将控件包装在容器中，然后使用flexbox ：
.container {
display: flex;
}
HTML 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 demo: https://jsfiddle.net/9vev9esr/4/ JSFiddle演示： https ://jsfiddle.net/9vev9esr/4/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.