如何在引导程序中将文本区域设置为最大宽度

Question

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

<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，仅显示底部）。

因此，我们如何做到这一点，以便当3个元素（esc，textArea和send）是内联的时，textArea将自身调整为最大宽度。

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

Answer 2

使用引导程序时，建议尝试在CSS中格式化引导程序类。 引导格式通常会覆盖您自己的css文件，除非您在自己的css文件中覆盖它们。 尝试这个：

#endChat {
  float: left;
}

#sendMessage {
  float: right;
}

.form-group {
  overflow: hidden;
  display: block;
}

.form-control#messageArea{
   width: 100%;
}

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

Answer 3

从CSS中删除以下代码：

#messageArea {
    width: 322px;
}

textarea的form-control类将自动将其宽度调整为该区域的100％。