html - Bootstrap 两列布局 - 将嵌套列中的字段与文本区域对齐

Question

请原谅，我是 Bootstrap 3 的新手。

使用 Bootstrap 3 的 grid 24 CSS 实现建议布局的最佳方法是什么？特别是，文本区域(元素描述)及其右侧嵌套列中的字段(原因代码、优先级和类别)被证明是一个挑战。我不认为我很了解列宽和字段宽度是如何在网格中继承的。

参见 BootPly例如，尽可能紧密地对齐 Reason Code、Priority 和 Class 字段，这显然需要一些调整。

Answer 1

根据快照，首先你必须将 row > col 分成 3

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
             //Here comes Input
             //Here comes Input
             //Here comes Textarea
        </div>
        <div class="col-md-4">
             //Here comes Select
             //Here comes Select
             //Here comes Select
             //Here comes Select
        </div>
        <div class="col-md-4">
             //Here comes Picture
        </div>
    </div>
</div>

在每个列中，你可以这样做来对齐输入、选择或文本区域(内联样式)前面的标签

<div class="row">
    <div class="col-md-6">
        <label for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName" class="control-label">Project Name</label> 
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <input type="text" id="ctl00_CP1_ProjectDetail_txtProjectName" class="form-control">
        </div>
    </div>
</div>

现在是你代码中的问题；

1. 你不需要自己写css form-control-inline ，您可以像在第二个代码中一样简单地划分 cols 来实现您想要通过 form-control-inline 实现的目标然后你也不需要这个 col-md-4在<label>类
2. 你不需要 style="height:65px;"像这样的文本区域，只需设置行数，它就会自行调整高度，如 <textarea class="form-control" rows="10"></textarea>