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>

即使在小屏幕中，如何让Random按钮保持在同一行？它与fontawesome图标一起工作正常但文本长度使它跳转到下一行。此外，如果有一种方法可以在它旁边添加一个fontawesome图标并使其在较小的屏幕中保持在同一行（不是必需的），那将是很好的。

Answer 1

试试这个

在按钮类中使用btn-sm

<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>

Answer 2

使按钮的位置固定：

button{
   position:fixed;
}

这应该可以解决您的问题

Answer 3

将控件包装在容器中并使用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/

如何在小屏幕中使按钮响应？

3 个答案:

试试这个