如何使表格正確自動縮放？

Question

理想情況下，我希望表單的textarea及其下方的所有內容隨着瀏覽器寬度的變化而保持居中。 我正在Chrome上進行測試。 如何使表單始終居中並隨着瀏覽器寬度的減小而使textarea寬度減小？

注意-我只能發布有問題的2個鏈接，因此請查看我的評論以獲取第三個圖像。

半屏（這是您僅將瀏覽器的右端向左拖動時的情況。請注意，您添加資金的行已向左對齊而不是居中對齊）

最小寬度屏幕（這是您可以將瀏覽器的邊緣向左拖動的最遠的屏幕。這里的問題是文本區域的手柄（右下角）不再可見。我希望將文本區域的寬度調整為瀏覽器的較小尺寸）：

的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;
}

Java腳本

<!-- 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如果感覺很傾斜，則設置為margin-right ），並且該元素應顯示在頁面的中央。

您可能更喜歡此解決方案，因為它需要您引入的唯一框架是jQuery，而且看起來您已經完成了此工作。

干杯!

Answer 2

只要擺脫你的CSS。 Bootstrap會自己處理所有事情。 在超級簡單的情況下，您甚至不必使用媒體標簽。

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

您可以在plnkr中調整屏幕大小，然后看到一切都在調整大小。

Answer 3

我認為這會起作用，但是...

只需進入Boostrap.css即可學習所有這些知識。 下載免費的Bootstrap模板開始學習。

CSS修復

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;
    }
}