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

不，您的图片没有足够的高度来进一步调整大小，background-size:cover意味着它必须覆盖整个屏幕而不会丢失比例。尝试仅为移动设置自定义背景位置css，因此背景可以显示您想要的正确部分。
您的div的宽度为col-xs-4，这使得任何屏幕中宽度的33％大于或等于x-small。要在手机中以全角显示，您可以尝试将其更改为col-xs-12 col-sm-4。

Bootstrap 3（CSS）的几个小问题

1 个答案: