Twitter bootstrap 3 引导程序3以行形式或输入组

我正在尝试创建一个搜索表单，如下所示

我不熟悉前端开发，不知道应该使用在线表单还是输入组

内联表单的问题是我无法调整输入框的大小（宽度），因此那里的任何指针都会非常有用

谢谢

代码更新

from home.HTML

<form class="form-inline" role="form">

    <input class="form-control input-lg" type="text" placeholder="Discover">
    <button type="button" class="btn btn-danger btn-lg">Go</button>


</form>

去

从layouts-application.html.erb

<div class="container">
<%= yield %>
</div>

---

根据您要完成的任务，您可以同时使用这两种方法。Bootstrap有很好的文档记录，您看过他们关于表单的文档吗

默认情况下，输入项在引导中为100%宽度（例如，它们填充所在的包含元素）。例如：

<input type="text" class="form-control" placeholder="Text input">

将产生100%宽度的输入字段和

<style>
.smallwidth {max-width: 200px;}
</style>

<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>

.smallwidth{最大宽度：200px；}

---

将导致一个200px宽度的输入字段，因为它受到我在其周围放置的外部div的限制。

要在引导中使用宽度，请参阅和使用列：

例如，如果您想在右侧创建一个表单，且宽度位于容器的50%，则可以执行以下操作：

<div class="container">
<div class="row">

    <div class="col-xs-12 col-md-6">
        This is div on the left
    </div>
    <div class="col-xs-12 col-md-6">
    <form class="form-inline" role="form">
    <input class="form-control input-lg" type="text" placeholder="Discover">
    <button type="button" class="btn btn-danger btn-lg">Go</button>
    </form>
    </div>

</div>
</div>

这是左边的div
去

---

前面的代码旨在更改小型设备上的行为。

请共享您的代码，有人可以帮助您简化内联表单的代码如下所示。''''''''''''''''问题是这是不可调整大小的，我无法用CSS有效地扩展它。重要的是显示上下文，我的意思是，表单的html容器，请更新您自己的问题，注释不是放置代码的好地方。是的，很抱歉。还在适应这个论坛。我已经更新了我最初的问题。再次感谢！如果我给它添加一个按钮，它将转到新行。可以在线添加一个吗？我刚刚从getbootstrap.com/components尝试了以下代码片段，根据结果我会说是：首先提交，谢谢！是的，这与我使用内联表单时所做的类似。同样，我无法100%地完成此操作或调整文本框大小以更好地适应面板。请复制并粘贴以下内容，如果这回答了您的问题，请升级投票或签名=）/*将最大宽度更改为您喜欢的任何值*/。myCss{max width:300px；}开始！