Bootstrap 3 (CSS) 的几个小问题

Question

我正在创建一个网站作为一个项目并使用 bootstrap 3 - 我在某些部分遇到了一些问题：

大窗口中的站点：http://2.ii.gl/9qDvim.png

小窗口中的站点：http://1.ii.gl/VA7OgN.png

1) 背景图像：当我缩小窗口时，图像会调整到某个点然后停止。在移动端有一个大的溢出隐藏。有没有办法根据窗口大小调整它的大小？

我当前的css代码：

#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -50px;
  /* Pad bottom by footer height */
  padding: 0 0 50px;
  background:url("/images/bgg5.jpg") no-repeat;
  background-size: cover;
}

2) 输入字段 - 在小型浏览器中调整太多 - 有没有办法阻止它调整大小，除非窗口宽度小于输入字段的长度？

这就是它在移动设备中的样子：http://4.ii.gl/9oQ7Hp.png

我的 1 个输入字段的代码：

<div class="form-group">

                <label for="inputID">Input</label>

                <div class="row">

                    <div class="col-xs-4">

                        <div class="input-group">

                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

                            <input type="text" class="form-control" placeholder="Enter Input" name="login">

                        </div>

                    </div>

                </div>

            </div>

Answer 1

1. 不，您的图像没有足够的 高度 来进一步调整大小，background-size:cover 意味着它必须覆盖整个屏幕而不失比例。尝试为移动设备设置自定义背景位置 css，以便背景可以显示您想要的正确部分。

2. 你的 div 的宽度有一个类 col-xs-4，这使得在任何大于或等于 x-small 的屏幕中占据 33% 的宽度。要在手机中全角显示，您可以尝试将其更改为col-xs-12 col-sm-4。