Bootstrap中的表单出错了

Question

这是我的代码：

<label class="col-sm-2 col-sm-2 control-label">Tempat Lahir</label> 
  <div class="col-sm-10">
    <input type="text" class="form-control" name="ttl_propinsi" id="ttl_propinsi" placeholder="ttl_propinsi">
    <input type="text" class="form-control" name="ttl_kota" id="ttl_kota" placeholder="ttl_kota">
    <input type="text" class="form-control" name="ttl_tempat" id="ttl_tempat" placeholder="ttl_tempat">
  </div><br><br>

  <label class="col-sm-2 col-sm-2 control-label">Tanggal Lahir</label> 
  <div class="col-sm-10">
    <input type="text" class="form-control" name="tanggal lahir" id="tanggal lahir" placeholder="Tanggal Lahir">
  </div>

  <label class="col-sm-2 col-sm-2 control-label">Jenis Kelamin</label>
  <div class="col-sm-4"form-co>
    <select name="jenis_kelamin" class="form-control">
      <option value=""></option>
    </select>
  </div>

  <label class="col-sm-2 col-sm-2 control-label">Gol Darah</label>
  <div class="col-sm-4"form-co>
    <input type="text" class="form-control" name="gol_darah" id="gol_darah" placeholder="Gol Darah">
  </div>

但结果是：

然后其他方面也有一些问题。

以下是代码：

{{1}}

结果如下：

我应该在那里制作一些CSS吗？

Answer 1

您的设计中存在的问题是您的标签无法在指定的空间内进行调整。我建议将标签的网格大小增加到3，并将输入框的网格大小减小到9。 请参考代码。

            <label class="col-sm-3 control-label">Tinggi Badan</label> 
            <div class="col-sm-9">
                <input type="text" class="form-control" name="tinggi_badan" id="tinggi_badan" placeholder="Tinggi Badan">
            </div>

另一个问题只需要你添加保证金。

<style>
.form-control.mb10
{
  margin-bottom:10px;
}
</style>

现在将类mb10添加到表单控件。

<div class="col-sm-10">
    <input type="text" class="form-control mb10" name="ttl_propinsi" id="ttl_propinsi" placeholder="ttl_propinsi">
    <input type="text" class="form-control mb10" name="ttl_kota" id="ttl_kota" placeholder="ttl_kota">
    <input type="text" class="form-control mb10" name="ttl_tempat" id="ttl_tempat" placeholder="ttl_tempat">
</div>