CSS Bootstrap：自动调整输入字段和按钮的大小

Question

我有一个文本类型的输入字段，还有一个“搜索”按钮。我希望这两个对象水平对齐；按钮尽可能大，输入字段占据其余空间。我整天都在尝试使用 CSS，但无济于事。

我正在使用 RoR，并使用 Bootstrap 库。我想知道是否有任何开箱即用的东西可以使这项工作。我也尝试过使用弹性框，但输入字段似乎有自己的想法。下面是有问题的代码。

<div class="mini-layout fluid">
 <div class="mini-layout-body">
   <h2>Shows</h2>
 </div>
 <div class="mini-layout-sidebar">
   <div class="search_container">
      <input id="search_shows_text" type="text" class="search-query">
      <button id="search_shows_button" 
          type="submit" class="btn btn-primary">Search</button>
  </div>
 </div>
</div>

我已经能够让 search_container 类水平放置东西，但是让它的子类适当地调整大小却让我一整天都在逃避。

非常感谢任何帮助。

编辑感谢 Krishnan 和 SO 社区，我得到了解决方案。以下是其他人的代码。

HTML
搜索

CSS

.search_container
{
  text-align:center;
  margin-top: 5px;
}

.text_area
{
  width: 55%; //Change as per your requirement
  display: inline-block;
  margin: auto;
}

.but_area
{
   width: 25%; //Change as per your requirement
   margin: auto;
}

Answer 1

默认情况下，bootstrap 的文本区域宽度设置为 206px，提交按钮的宽度设置为 71px。因此，为了使其适应您的要求，您必须覆盖这些默认属性。我可能会做这样的事情。

使用自定义属性创建一个类text_area

.text_area
{
   width: 85%; //Change as per your requirement
}

用自定义属性创建一个类but_area

.but_area
{
   width: 10%; //Change as per your requirement
}

并将在输入文本区域和按钮中使用它。

 <input id="search_shows_text" type="text" class="search-query text_area">
  <button id="search_shows_button" 
      type="submit" class="btn btn-primary but_area">Search</button>

这将使我的 文本区域占据 85% 的空间和 按钮占据 10% 的空间在我的窗口中，剩余 5% 的空间是空闲的。