Question

我正在尝试创建一个类似下面的搜索表单。

我是前端开发的新手，如果应该使用内联表单或输入组，我会感到困惑吗？

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

谢谢！

代码更新

来自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>

来自布局的

- application.html.erb

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

Answer 1

你可以根据你想要完成的任务来使用它们。 Bootstrap有详细记录，您是否阅读了有关表单的文档？ http://getbootstrap.com/css/#forms

默认情况下，输入项在引导程序中是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>

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

Answer 2

要使用Bootstrap中的宽度，请参阅grid system并使用列：

例如，如果您想要一个右侧的表格和宽度位于容器的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>

之前的代码旨在改变小型设备上的行为。

Bootstrap 3以线形或输入组

2 个答案: