自舉對齊不同列的輸入和標籤尺寸

Question

我有一個大的形式和對齊的問題。我剪了一些字段，但演示會顯示問題。

我有兩列在開始的形式，有些行使用一半的寬度，有些行使用完整的witdh。而且，最後一個問題。正如你可以看到textarea s不與其他輸入對齊：

我該如何解決它？

DEMO

PS。我使用Bootstrap 4，但是，我認爲這個問題也與Bootsrap 3有關。

.full-width { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<form novalidate> 
 
    <div class="row"> 
 
     <div class="col-md-8"> 
 
     <div class="form-group row"> 
 
      <label for="field1" class="col-md-2 col-form-label">Text Area</label> 
 
      <div class="col-md-10"> 
 
       <textarea id="field1" class="form-control" 
 
        cols="30" rows="4"></textarea> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="form-group row"> 
 
      <div class="col-md-12"> 
 
       <div class="form-check"> 
 
        <label class="form-check-label"> 
 
        <input class="form-check-input" type="checkbox"> Checkbox 1 
 
        </label> 
 
       </div> 
 
       <div class="form-check"> 
 
        <label class="form-check-label"> 
 
        <input class="form-check-input" type="checkbox"> Checkbox 2 
 
        </label> 
 
       </div> 
 
       <div class="form-check"> 
 
        <label class="form-check-label"> 
 
        <input class="form-check-input" type="checkbox"> Checkbox 3 
 
        </label> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <div class="form-group row"> 
 
     <label for="field2" class="col-md-2 col-form-label">Input</label> 
 
     <div class="col-md-10"> 
 
      <input id="field2" class="form-control"/> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
<div class="col-md-12"> 
 
    <div class="form-group row"> 
 
     <label class="col-md-1 col-form-label">Options</label> 
 
     <div class="col-md-11"> 
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
       <span>Label 1</span> 
 
       <input type="radio" name="group1" value="Value 1"> Value 1 
 
       <input type="radio" name="group1" value="Value 1"> Value 2 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <span>Label 2</span> 
 
       <input type="radio" name="group2" value="Value 1"> Value 1 
 
       <input type="radio" name="group2" value="Value 2"> Value 2 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
       <div class="row"> 
 
        <div class="col-md-11"> 
 
        <textarea class="full-width"></textarea> 
 
        </div> 
 
        <div class="col-md-1"> 
 
        <span">Icon</span> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col-md-11"> 
 
        <textarea class="full-width"></textarea> 
 
        </div> 
 
        <div class="col-md-1"> 
 
        <span">Icon</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div> 
 
</form>

Answer 1

的問題是第一2行嵌套在col-md-8，和錯位「選項」行嵌套在col-md-12。

此外，清理代碼中的各種格式錯誤的HTML。

http://www.codeply.com/go/sCYzgdFXxa