使用 Bootstrap 的文本区域太宽且未对齐

Question

我刚开始使用 Bootstrap，但在使用 textarea HTML 元素时遇到问题 - 它没有与其他文本字段左对齐，而是遍及整个页面。有什么想法吗？

<!DOCTYPE html>
<html>
<head>
    <title>Contact</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body name="viewport" content="width=device-width, initial-scale=1.0">
    <div id="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="name">
                    Name
                </label>
                <div class="col-sm-4">
                    <input class="form-control" type="text" id="name" placeholder="Your name" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="email">
                    E-mail
                </label>
                <div class="col-sm-4">
                    <input class="form-control" type="email" id="email" placeholder="Your email address" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="comment">
                    Message
                </label>
                <div class="cols-sm-4">
                    <textarea class="form-control" rows="3" id="comment"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <input class="btn btn-success" type="submit" value="Send" />
                </div>
            </div>
        </form>
    </div>
</body>
</html>

结果如下所示。

文本区域太宽且未与其上方的其他文本元素对齐

Answer 1

解决这个问题：

            <div class="cols-sm-4">
                <textarea class="form-control" rows="3" id="comment"></textarea>
            </div>

至

            <div class="col-sm-4">
                <textarea class="form-control" rows="3" id="comment"></textarea>
            </div>

Answer 2

您可以添加：

.cols-sm-4{
width: 33.33333333%;
margin-left: 15px;
display: inline-block;
}

使用 Bootstrap 的文本区域太宽且未对齐

Textarea using Bootstrap too wide and not aligning

html

css

textarea

alignment

twitter-bootstrap