两列表单bootstrap 4

Question

我对bootstrap不太在行，所以请帮我一下。我想有一个用bootstrap设计的页面分为两个两列。大小为'col-md-4‘的第一列应包含一些文本信息，大小为’of md-8‘的第二列应包含实际表单。

我试过了，但是不起作用。

<section>
 <div class="col-md-4 form-group">
 <h3>EVENT INFORMATION</h3>
  <small>Add some information about this section</small>
 </div>
 <div class="col-md-8 form-group">
  <label for="formGroupExampleInput">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  <label for="formGroupExampleInput2">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> 
  </div>
</section>

https://jsfiddle.net/62s24kmp/

Answer 1

你必须用<div class="row">来包装你的jsfiddle当你提供jsfiddle的时候不要忘了添加外部资源。

这里是JSFIDDLE

​

​