Bootstrap 4字段在表单组内联中未正确排列

Question

我在几页上使用引导程序4，但在尝试用左侧标签对齐字段并确保输入字段显示对齐时遇到问题。

这是我的代码

<div class="wrapper fadeInDown">
 <div id="formContent">
    <!-- Tabs Titles -->
    <div id="formHeader">
        <a class="underlineHover" href="/">Login</a>
        <a class="underlineHover" >Register</a>
    </div>
    <!-- Icon -->

    <!-- Login Form -->
    <form th:action="@{/register}" method="post">

        <div class="form-group form-inline">
            <label for="playerName"> Player Name</label>
            <input type="text" required="true" id="playerName" autofocus="autofocus " class="fadeIn second form-control" name="playerName"/>
        </div>
        <div class="form-group form-inline">
            <label for="playerId"> Username</label>
            <input type="text" required="true" autofocus="autofocus " class="fadeIn second form-control" id="playerId" name="playerId"/>
        </div>
        <div class="form-group form-inline">
            <label for="email"> Email Address</label>
            <input type="text" required="true" autofocus="autofocus " class="fadeIn second form-control" id="email" name="email" placeholder="email@email.com"/>
        </div>
        <div class="form-group form-inline">
            <label for="password"> Password</label>
            <input type="password" required="true" id="password" class="fadeIn third form-control" name="password" data-toggle="password"/>
            <div class="input-group-append">
            <span class="input-group-text">
                 <i class="fa fa-eye"></i>
             </span>
            </div>
        </div>
        <div class="form-group form-inline">
            <label for="password"> League Code</label>
            <input type="text" id="league" class="fadeIn third form-control" name="leagueCode"/>
        </div>

        <div th:if="${failure}">
            <div class="alert alert-danger">
                <p th:text="${failure}"/>
            </div>
        </div>
        <input type="submit" class="fadeIn fourth" value="Register">
    </form>

    <!-- Remind Passowrd -->
    <div id="formFooter">
        <a class="underlineHover" href="#">Forgot Password?</a>
    </div>

</div>
</div>

我尝试为每一行使用单独的行，但是那也不行。

这是页面的外观：

Answer 1

如果您使用的是Bootstrap 4，则使用form-group row代替form-group form-inline会有所帮助。

请看示例：（请在整页视图中打开以获取实际大小）

<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Answer 2

您是否期望这样：

def prepare_data(x, y, top_cat_indices, sample_size):
    res_lst = []

    for i in top_cat_indices:

        # get column of indices with relevant cat
        temp = y.tocsc()[:, i]

        # all docs with labeled category
        c1 = np.where(temp.sum(axis=1)>0)[0]
        c2 = np.where(temp.sum(axis=1)==0)[0]
        cat_present = x.tocsr()[c1,:]
        # all docs other than labelled category
        cat_notpresent = x.tocsr()[c2,:]
        # get indices equal to 1/2 of sample size
        idx_cat = np.random.randint(cat_present.shape[0], size=int(sample_size/2))
        idx_nocat = np.random.randint(cat_notpresent.shape[0], size=int(sample_size/2))
        # concatenate the ids

        sampled_x_pos = cat_present.tocsr()[idx_cat,:]
        sampled_x_neg = cat_notpresent.tocsr()[idx_nocat,:]
        sampled_x = sparse.vstack((sampled_x_pos, sampled_x_neg))

        sampled_y_pos = temp.tocsr()[c1][idx_cat,:]
        print(sampled_y_pos.nnz)
        sampled_y_neg = temp.tocsr()[c2][idx_nocat,:]
        print(sampled_y_neg.nnz)

        sampled_y = sparse.vstack((sampled_y_pos, sampled_y_neg))

        res_lst.append((sampled_x, sampled_y))

    return res_lst

#registration-btn{
width:90px;
outline:none;
border:none;
line-height:40px;
color:white;
background-color:#23b2e2;
border-radius:10px;
}
.form-inline .form-control{
width:80% !important;
}
#formContent{
text-align:center;
}
.input_box{
width:75%;
display:flex;
}
.input-group-text{
padding:0.8%;
}
label{
width:25%;
}
.form-group{
display:flex;
}
.form-control{
width:100%;
}
#password{
 width:calc(80% - 40px) !important;
}
.password-eye{
width: 40px;
text-align: center;
 border-radius: 4px;
background-color: lightgrey;
line-height: calc(1.5em + .75rem + 2px);
}