Question

理想情况下，我希望我的表单textarea及其下面的所有内容都随着浏览器宽度的变化而保持居中。我在Chrome上测试。如何使表单始终保持居中，并且随着浏览器宽度的减小textarea宽度减小？

注意 - 我只能发布2个有问题的链接，所以请看第三张图片的评论。

半屏（这是您只需将浏览器的右端拖到左侧。请注意，您添加货币的行已对齐而不是中心）

最小宽度屏幕（这是你可以将浏览器边缘向左拖动最远的地方。这里的问题是textarea的手柄（右下角）不再可见。我希望textarea的宽度调整为浏览器的较小尺寸）：

HTML

<form class="form-inline" align="center">

    <!-- Section to type question-->
        <div class="form-group" style="display:block">
            <textarea class="form-control" style="width:100%" rows="5"></textarea>
        </div>

    <!--Section to add money---->
        <div class="input-group" id="AddMoney">
          <span class="input-group-addon">$</span>
          <input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)'>
        </div>

    <!--Section to add file-->
        <div id="AddFile">
            <a href="#" onclick="document.getElementById('uploadFile').click(); return false;" />Add File</a>
            <input type="file" id="uploadFile" style="visibility: hidden;" />
        </div>

        <div id="imagePreview"></div>

    <!--Section for the Submit button-->
        <div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

CSS

form {
    width:500px;
    margin:50px auto;
}
#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}
#AddMoney {
    width:150px;
    top:10px;
}
#AddFile {
    position:relative;
    top:10px;
}

的Javascript

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<!-- jQuery ui -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Answer 1

由于您添加了jQuery作为标记，我将假设您使用jquery解决方案。我推荐的是一个简单的函数，它将窗口大小的元素集中在一起。它可能看起来像这样：

function center(){
    var width = $(window).width();
    var width2 = width - $('#elementToCenter').width();
    var newMargin = width2 / 2;
    $('#elementToCenter').css("margin-left", newMargin);
}
$(window).resize(center);

变量width表示窗口的总宽度。要获取相关元素两侧的空白，请从该总数中减去其宽度以获得width2。现在，将其除以2以获得属于每一侧的空白量。最后，您可以将newMarin设置为margin-left（或margin-right，如果您愿意的话），并且元素应显示在页面的中心。

您可能更喜欢这个解决方案，因为它需要您引入的唯一框架是jQuery，看起来您已经完成了。

干杯！

Answer 2

摆脱你的CSS。 Bootstrap自己处理所有事情。在您的超级简单案例中，您甚至不必使用媒体标签。

  form {
    max-width:500px;
    margin:50px auto;
  }

您可以在plnkr中调整屏幕大小，看看所有内容都在调整大小。

Answer 3

我认为这会奏效，但......

进入 Boostrap.css 了解所有这些内容。下载免费的Bootstrap模板开始学习。

CSS FIX

form {
    width: 100%;
    max-width: 500px;
    margin:50px auto 50px auto;
}

#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}

#AddMoney {
    width:150px;
    margin-top:10px;
}

#AddMoney input {
width: 90%;
float:right;
}

#AddMoney span
{
width:5%;
}

#AddFile {
    display: block;
    position:relative;
    margin-top:10px;
}

form input,
form textarea
{
    width: 100%;
    max-width: 500px;
}

/* Small to Medium screens or higher */
@media (min-width: 768px) {
    form,
    form input,
    form textarea
    {
        max-width: 800px;
    }
}

如何正确地自动缩放表单？

3 个答案: