html - 如何在 Bootstrap 中将文本区域设置为最大宽度

Question

我正在尝试创建一个聊天区。它会在顶部显示消息，在底部显示输入。我想保持“esc”按钮和“发送”按钮的宽度相同，但将文本区域增加到最大宽度，同时保持所有三个元素内联。到目前为止，这是我尝试过的。

<div class="col-sm-8">
    <div id="chatArea">
    </div>

    <form class="form-inline" role="form" id="userInput">
        <button id="endChat" type="button" class="btn btn-danger">Esc</button>

        <div class="form-group">
            <textarea class="form-control" rows="5" id="messageArea"></textarea>
        </div> 

        <button id="sendMessage" type="submit" class="btn btn-info">Send</button>
    </form>
</div>

和CSS

#chatArea {
    height: 500px;
    background-color: black;
}

#messageArea {
    width: 322px;
}

#endChat, #sendMessage {
    width: 70px;
    height: 110px;
}

但这是结果(没有显示完整的 chatArea div，只显示底部)。

那么我们如何才能使 textArea 调整自身的大小以达到最大宽度，同时 3 个元素(esc、textArea 和 send)是内联的。

Answer 1

HTML:

    <form role="form" id="userInput">
        <button id="endChat" type="button" class="btn btn-danger">Esc</button>
        <button id="sendMessage" type="submit" class="btn btn-info">Send</button>

        <div class="form-group">
            <textarea class="form-control" rows="5" id="messageArea"></textarea>
        </div> 
    </form>

注意 #endChat、#sendMessage 和 .form-group 元素的顺序。

CSS:

#endChat {
  float: left;
}

#sendMessage {
  float: right;
}

.form-group {
  overflow: hidden;
}

#messageArea {
   width: 100%;
}

#endChat, #sendMessage {
  height: 110px;
}