Question

我一直在寻找一种方法来制作我的＆＃39; textarea＆＃39;在它的专栏里面100％。我已经看到了一些不同的方式（我没有一个能够工作）来创造一个＆＃39; textarea＆＃39;在Bootstrap中扩展到100％。我从使用自定义CSS样式到使用class =＆＃34; form-control col-lg-12＆＃34;覆盖Bootstrap的CSS。

任何人都有一个工作建议，可以重新调整流量吗？

这是我的代码。现在，宽度比占位符文本稍微过了一点。

<div class="row">
            <div class="col-lg-7">
                <h2>@Model.EmployeeName</h2>
                <h3>Employee #: @Model.EmployeeNumber</h3>

                <h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
                <textarea rows="2" placeholder="Exception Log comments."></textarea>
            </div>
            <div class="col-lg-5 text-right">
                <div ng-controller='TimeCtrl'>
                    <h2>{{ clock | date:'fullDate'}}</h2>
                    <h1>{{ clock | date:'HH:mm:ss'}}</h1>
                    <input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
                </div>
            </div>
        </div>

Answer 1

我相信bootstrap自己的表单元素类（form-control）会使表单元素占据它们所在列的整个宽度。

<textarea class="form-control"></textarea>

Answer 2

class="form-control"必须有效。如果它不起作用，则表示在css文件中的某处，max-width属性设置为限制宽度的文本区域。在这种情况下，请检查site.css文件并删除max-width属性。

Answer 3

只需在textarea中添加一个'form-control'类。如果您在小屏幕上工作，col-lg-7和col-lg-5将覆盖所有窗口。

你的专栏文字是不同的。你可能会在屏幕上看到col-sm-12。

<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>

Answer 4

如果您只是添加一些自定义CSS，则可以强制它使用整个容器宽度

 <script>
  var location =  window.location.href;
if(location =="file:///C:/Users/Fahad/Desktop/index.html")
{
    document.body.style.backgroundColor = "red";
}
  </script>

但是，使用bootstrap类＆＃34; form-control＆＃34;也完成了这个

Answer 5

如果您希望将form-control课程加到textarea上，如果您想要100％宽度，则无需添加col-lg-12 bcoz form-control等级，即可获得100％的宽度元素的父级。

<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>

在Bootstrap 3

5 个答案: