Question

原谅我，我对Bootstrap 3很新。

使用Bootstrap 3的网格24 CSS实现建议布局的最佳方法是什么？特别是，文本区域（项目描述）和右侧嵌套列中的字段（原因代码，优先级和类别）被证明是一个挑战。我不认为我非常理解网格中的列和字段宽度是如何继承的。

请参阅BootPly以获取示例，尽可能地对齐原因代码，优先级和类字段，这显然需要进行一些调整。

Answer 1

根据快照，首先你需要划分行＆gt; col into 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>

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

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

现在代码中存在问题;

你不需要编写自己的css form-control-inline，你可以简单地将cols分成第二个代码中的cols来实现你想要用form-control-inline实现的目标，你也可以在col-md-4类

<label>

您不需要style="height:65px;"这样的文字区域，只需设置行数就可以像<textarea class="form-control" rows="10"></textarea>

Answer 2

以下是您问题的快速解决方案。 Slash Commands

<div class="container-fluid">
    <div class="col-md-10 col-xs-12">
        <div class="row">
            <div class="col-md-12">
                <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName">Project Name</label>
                <input type="text" class="form-control-inline col-md-3 col-xs-6">
                <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_ddlActivityType" id="ctl00_CP1_ProjectDetail_lblActivityType">Activity Type</label>
                <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-3 col-xs-6"></select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName">Project Launch</label>
                <input type="text" class="form-control-inline col-md-3 col-xs-6">
                <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_ddlActivityType" id="ctl00_CP1_ProjectDetail_lblActivityType">Status</label>
                <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-3 col-xs-6"></select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-6">
                    <label class="control-label col-md-6 col-xs-12">Project Description</label>
                    <textarea class="form-control-inline col-md-6 col-xs-12" style="height:75px;"></textarea>
                </div>
                <div class="col-md-6">
                    <div class="col-xs-12">
                            <label class="control-label col-md-6 col-xs-6">Reason Code</label>
                            <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-6 col-xs-6"></select>
                    </div>
                    <div class="col-xs-12">
                            <label class="control-label col-md-6 col-xs-6">Priority</label>
                            <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-6 col-xs-6"></select>
                    </div>
                    <div class="col-xs-12">
                            <label class="control-label col-md-6 col-xs-6">Class</label>
                            <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-6 col-xs-6"></select>
                    </div>
                </div>
            </div>    
        </div>    
    </div>
    <div class="col-md-2 col-xs-12">
        <div class="well">Test image here
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>   
</div>

P.S。我只为列添加了引导类。

Answer 3

我在代码中做了一些更正，以达到你提出的草案的目标，但基本的Bootstrap基本上已经提供了。

我意识到你没有掌握网格是为了获得完美的对齐，并排的列必须添加24的最终值，例如：al-lg-14旁边的al-lg-14。如果使用lg变体，md和xs sm，则可以控制布局在各种屏幕分辨率下的行为方式。

<强> HTML

     <div class="container-fluid">
      <div class="row">
        <div class="col-lg-18 col-md-18 col-xs-24">
          <div class="col-lg-12 col-md-12 col-xs-24">
            <div class="row space-form">
              <label for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName" class="control-label col-md-10">Project Name</label>
              <div class="col-md-14">
                <input type="text" id="ctl00_CP1_ProjectDetail_txtProjectName" class="form-control-inline form-left">
              </div>
            </div>
            <div class="row space-form">
              <label for="ctl00_CP1_ProjectDetail_txtProjectLaunchName" id="ctl00_CP1_ProjectDetail_lblProjectLaunchName" class="control-label col-md-10">Project Launch Name</label>
              <div class="col-md-14">
                <input name="ctl00$CP1$ProjectDetail$txtProjectLaunchName" type="text" id="ctl00_CP1_ProjectDetail_txtProjectLaunchName" class="form-control-inline form-left">
              </div>
            </div>
            <div class="row space-form">
              <label class="control-label col-md-10">Project Description</label>
              <div class="col-md-14">
                <textarea class="form-control-inline form-left" style="height:65px;"></textarea>
              </div>
            </div>
          </div>
          <div class="col-lg-12 col-md-12 col-xs-24">
            <div class="row space-form">
              <label for="ctl00_CP1_ProjectDetail_ddlActivityType" id="ctl00_CP1_ProjectDetail_lblActivityType" class="control-label col-md-8">Activity Type</label>
              <div class="col-md-16">
                <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" disabled="disabled" class="form-control-inline">
                </select>
              </div>
            </div>
            <div class="row space-form">
              <label for="ctl00_CP1_ProjectDetail_ddlStatus" id="ctl00_CP1_ProjectDetail_lblStatus" class="control-label col-md-8">Status</label>
              <div class="col-md-16">
                <select name="ctl00$CP1$ProjectDetail$ddlStatus" id="ctl00_CP1_ProjectDetail_ddlStatus" class="form-control-inline validationpurple">
                </select>
              </div>
            </div>
            <div class="row space-form">
              <label class="control-label col-md-8">Reason Code</label>
              <div class="col-md-16">
                <input type="text" class="form-control-inline">
              </div>
            </div>
            <div class="row space-form">
              <label class="control-label col-md-8">Priority</label>
              <div class="col-md-16">
                <input type="text" class="form-control-inline">
              </div>
            </div>
            <div class="row space-form">
              <label class="control-label col-md-8">Class</label>
              <div class="col-md-16">
                <input type="text" class="form-control-inline">
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-xs-24 ">
          <div class="well space-form" style="height: 100%">Test image here <br>
            <br>
            <br>
            <br>
            <br>
          </div>
        </div>
      </div>
    </div>

<强> CSS

        .space-form {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .control-label {
        text-align: left;
    }
    .form-control-inline {
        width: 100%
    }
    @media (max-width:991px) {
    .form-left {
        width: 100%
    }
    }
    @media (min-width:990px) {
    .form-left {
        width: 90%
    }
    }

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

3 个答案: