引导两个栏布局 - 对齐与文本区域

Question

原谅我嵌套列字段，我是比较新的自举3

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

查看BootPly举一个例子，尽可能地对齐原因代码，优先级和类字段，这显然需要一点调整。

Answer 1

根据该快照，首先你要行>山坳分为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像在第2的代码实现，你是绑实现与form-control-inline和THN你也不需要这个col-md-4在<label>类
2. 你不需要style="height:65px;"文本区域这样的，只是设置的行数，它会调整高度本身就像<textarea class="form-control" rows="10"></textarea>

Answer 2

这里是你的问题的快速解决方案。 jsfiddle

<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-10旁边的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% 
    } 
    }