如何在bootstrap

Question

我正在尝试创建聊天区域。它会在顶部显示消息，在底部显示输入。我想保留＆＃34; esc＆＃34;按钮和＆＃34;发送＆＃34;按钮具有相同的宽度，但将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，只显示底部）。

那么我们怎样才能使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;
}

Answer 2

使用bootstrap时我建议尝试在css中格式化bootstrap类。除非您在自己的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％。