Question

我有以下页面，我希望textarea宽度占据页面宽度的其余部分，但宽度样式根本不会改变大小，我不知道为什么。如果我将txtChatMsg textarea宽度样式更改为任何内容，则无法直观地更改。

<div class="container-fluid">
    <div class="row" style="margin-top: 10px; background-color: aqua;">
        <div id="divPortrait" class="col-md-3 text-center">
            <img src="~/Content/good_guy.png" />
        </div>

        <div id="divChat" class="col-md-9" style="background-color: gray;">
            <div class="row">
                <div id="divMessages">
                    <!--DYNAMICALLY ADD DIVS FOR EACH CHAT MSG INSIDE HERE-->
                    <div>
                        Test Message here
                    </div>
                </div>
            </div>

            <div class="row" style="background-color: red;">
                <textarea id="txtChatMsg" class="form-control" style="width: 100%;" rows="2" placeholder="Write a reply..."></textarea>
            </div>

            <div class="row text-right" style="margin-top: 5px;">
                <button type="button" class="btn btn-default">Send</button>
            </div>
        </div>
    </div>

Answer 1

作为dm4web stated，您发布的导致此行为的代码外部存在某些内容。为了证明这一点，JSFiddle txtChatMsg元素的格式已更改为width: 50%。

您可以尝试检查浏览器中的txtChatMsg元素，看看是否有任何样式覆盖了CSS width规则。我还要检查是否有任何可能针对此div并覆盖宽度的Javascript。

Bootstrap textarea宽度没有调整大小

1 个答案: