引导程序输入组无响应

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

弄清楚了。 将搜索框类的宽度更改为80％。 固定！

Answer 3

您还可以通过将.searchbox定义为以下方式来简化引导媒体查询：

.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：20像素； 最大宽度：300像素； }