1

我有一个关于尝试以水平引导形式跨越多行图像的问题。目前的情况如下图所示： 在此处输入图像描述 但是，我希望左侧的个人资料图像跨越输入字段的多行。现在它出于某种原因将第二个输入字段向下推，我似乎无法理解它。我还没有真正体验过这一切。所以我有点卡住了。我似乎找到的所有解决方案都针对 bootstrap 网格系统，并不真正适用于 Bootstrap 表单。有没有其他人有这方面的经验或知道如何做到这一点？当前的代码片段可以在下面找到。提前致谢！

<!-- Basic information -->
<h4>Algemeen</h4>
<img src="./img/profile-edit.png" class="col-sm-2 img-profile-edit col-profile"></img>
<form class="form-horizontal">
  <div class="form-group form-group-sm">
    <label for="name" class="col-sm-3">Voornaam:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="name">
    </div>
  </div>
  <div class="form-group form-group-sm ">
    <label for="surname" class="col-sm-3">Achternaam:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="surname">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label for="gender" class="col-sm-3">Geslacht:</label>
    <div class="col-sm-6" id="gender">
      <label class="radio-inline"><input type="radio" name="optman">Man</label>
      <label class="radio-inline"><input type="radio" name="optwomen">Vrouw</label>
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label for="dob" class="col-sm-3">Geboortedatum:</label>
    <div class="col-sm-6">
      <input type="date" format="dd/MM/yyyy" class="form-control" id="dob">
    </div>
  </div>
</form>

以及相关的 CSS 类：

.img-profile-edit {
  border-radius:15%;
  overflow:hidden; 
}

@media (min-width: 768px) {
  .col-profile {
      float: right;
      padding: 0 5px;
  }
}

编辑：代码片段中的父级<div>太多

4

2 回答 2

1

据我了解您的问题，它应该看起来像下面的一个片段。如果它未能满足您对某些原因的期望，请发表评论-我会尝试更改答案

.img-profile-edit {
  border-radius:15%;
  overflow:hidden; 
}

@media (min-width: 768px) {
  .col-profile {
      float: right;
      padding: 0 5px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4>Algemeen</h4>
<div class="col-sm-10">
<form class="form-horizontal">
  <div class="form-group form-group-sm">
    <div class="form-group form-group-sm">
      <label for="name" class="col-sm-3">Voornaam:</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="name">
      </div>
    </div>
    <div class="form-group form-group-sm ">
      <label for="surname" class="col-sm-3">Achternaam:</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="surname">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label for="gender" class="col-sm-3">Geslacht:</label>
      <div class="col-sm-6" id="gender">
        <label class="radio-inline"><input type="radio" name="optman">Man</label>
        <label class="radio-inline"><input type="radio" name="optwomen">Vrouw</label>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label for="dob" class="col-sm-3">Geboortedatum:</label>
      <div class="col-sm-6">
        <input type="date" format="dd/MM/yyyy" class="form-control" id="dob">
      </div>
    </div>
  </div>
</form>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/200x200" class="img-profile-edit col-profile">
</div>

于 2017-01-02T22:00:10.500 回答
0

尝试将col-sm-10课程添加到您的form

于 2017-01-02T21:52:23.537 回答