How to make a button responsive in small screens?
Question
.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. 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).
3 answers
solution1
1 2017-08-08 16:20:21
Try this
Use btn-sm in button class
<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
solution2
0 2017-08-08 16:18:24
make the position of button fixed:
button{
position:fixed;
}
This should solve your problem
solution3
0 ACCPTED 2017-08-08 16:19:27
Wrap the controls in a container and use 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 demo: https://jsfiddle.net/9vev9esr/4/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.