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

Question

我有一个文本类型输入字段，我有一个“搜索”按钮。我希望这两个对象水平对齐;按钮的大小和输入字段占据了剩下的空间。我整天都在尝试使用CSS，但无济于事。

我正在使用RoR，并使用Bootstrap库。我想知道是否有任何开箱即用的功能。我也尝试过使用flexbox，但输入字段似乎有自己的想法。以下是有问题的代码。

<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％的空间空闲。