Question

我的网站上的输入组出现问题，没有调整xs屏幕尺寸。

以下是代码：

<div class="gradient">
        <div class="container">
            <div class="row">
            <div class="col-xs-1 col-s-1 col-m-2"></div><!-- /left column -->
            <div class="col-xs-10 col-s-10 col-m-8">
                <h1>IS IT ON NETFLIX?</h1>
                <p>Search to see if your TV show or movie is available to stream on Netflix</p>
                <div class="input-group searchbox">
                  <input type="text" id="searchInput" class="form-control" placeholder="Search for...">
                  <span class="input-group-btn">
                    <button id="submit" class="btn btn-default" type="button">Go!
                    </button>
                  </span>
                </div><!-- /input-group -->
            </div><!-- /middle column -->
            <div class="col-xs-1 col-s-1 col-m-2"></div><!-- /right column -->
        </div><!-- /row -->
    </div><!-- /container -->
</div><!-- /gradient -->

该网站为isitonnetflix.net。非常感谢!!

Answer 1

使用对齐的div包装图像标记：

<div class="" align="center"></div>

可以帮助它能够坐在div的中间，但你也可以：

<img src="" align="middle" alt="">

你绝对可以改变这些价值，这可能有点粗暴，但它可能会有所帮助。

Answer 2

想出来。将searchbox类的宽度更改为80％。固定！

Answer 3

您还可以.searchbox定义为：

的方式促进bootstraps媒体查询

.searchbox {
    border-radius: 5px;
    height: 50px;
    margin: 0 auto;
    padding-top: 20px;
    /* width: 300px; */
}

没有为 X tra S 商城尺寸明确说明其宽度，您也会看到它修复了。另一种解决方案是设置max-width而不是width：

.searchbox { border-radius：5px; 身高：50px; 保证金：0自动; padding-top：20px; 最大宽度：300px; }

bootstrap输入组没有响应

3 个答案: