具有左/右按钮的响应式自举输入

Question

<form id="form-search" name="form-search" class="form-inline" action="/">
    <div class="input-group">
        <span class="input-group-btn">
            <button id="gps" type="button" class="btn gps">GPS</button>
        </span>
        <input id="address" name="address" type="text" class="form-control address text-center" placeholder="Enter Address" />
        <span class="input-group-btn">
            <input id="submit" name="submit" type="submit" class="btn submit" value="Search" />
        </div>
    </div>
</form>

理想情况下，我希望较小设备上的搜索按钮（Find My Legislator）能够突破到新行而不是导致视图中断，因为它仍然在同一行上。当它确实中断时，我希望输入字段（地址）变圆，而不是在右侧平坦，并且搜索按钮在两者上都是四舍五入的。我相信它与Bootstrap中的组有关，但我无法弄清楚正确的方法。

Answer 1

https://jsfiddle.net/luciocamilo/e712fj68/

<form id="form-search" name="form-search" class="form-inline" action="/">
    <div class="input-group">
        <span class="input-group-btn">
            <button id="gps" type="button" class="btn gps">GPS</button>
        </span>
        <input id="address" name="address" type="text" class="form-control address text-center" placeholder="Enter Address" />
        <span class="input-group-btn">
            <input id="submit" name="submit" type="submit" class="btn submit visible-sm visible-md visible-lg" value="Search" />
        </div>
        <div class="btn btn-danger btn-block hidden-sm hidden-md hidden-lg">Search</div>
    </div>
</form>

您可以使用visible和hidden类在代码中执行此操作。 您所要做的就是将您的按钮默认设置为隐藏在xs（hidden-xs）和您的“新按钮”中。 as visible-xs。

此外，您可以使用班级btn-block来占据按钮的全宽。