Question

我正在尝试在ansonika

的现成模板上进行更改搜索部分

结果我得到这个图像，你可以看到searchnow不在同一行。

在这里，您可以看到我对该部分的代码。

<section id="search_container">
<div id="search">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tours" data-toggle="tab">Tours</a></li>

                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tours">
                    <h3>Search Tours in Paris</h3>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Destination</label>
                                    <input type="text" class="form-control" id="firstname_booking" name="firstname_booking" placeholder="Type your search terms">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                     <label><i class="icon-calendar-7"></i> Date</label>
                                    <input class="date-pick form-control" data-date-format="M d, D" type="text">

                                </div>

                            </div>

                            <button class="btn_1 green" type="submit"><i class="icon-search"></i>Search now</button>


                        </div><!-- End row -->



                    </div><!-- End rab -->


                </div>
</div>

如何将此搜索框放在同一行。

感谢。

Answer 1

[更新]

在你的标签css中，我看到它为<label>添加了另外5 px的底部边距，所以对于 hack 解决方案，我添加了另一个5 px底部边距的br以获得结果。

    <div class="col-md-5">
        <div style="margin-bottom: 5px;">
            <br>
        </div>
        <button class="btn_1 green" type="submit"><i class="icon-search"></i>Search now</button>
    </div>

Answer 2

问题很简单：
您在其余部分中提供了标签和输入，并且仅在此输入中提供了输入，因此输入占据了标签的位置除了扩大整个div以及整行内联之外，没有简洁的解决方案另一种方法是创建一个标签或一个空的div，按下按钮。
或者你可以使用'top'和'position'属性为按钮添加内联样式。
我也建议使用这是一个专栏。这样就更清洁了。

Bootstrap搜索按钮与输入字段不一致

2 个答案: