html - 使用 Bootstrap 类对齐 html 中的元素

Question

我有以下代码

html页面(部分)

<div class="container">
  <div class="right-page col-md-9">
    <div class="row">
      <div class="category-item col-md-4">
        <form action="/settings/category/2/" method="post" class="form-inline">
          <div class="container">
            <div class="row input-container">
              <div class="form-group">
                <div class="col-md-8">
                  <input class="form-control input-sm col-md-3" type="text" value="KONS ">
               </div>
               <div class="col-md-3">
                  <input class="form-control input-sm col-md-3 myColorPicker">
                </div>
              </div>
            </div>
          </div>
          <div class="container">
            <div class="row btn-container">
              <button class="btn btn-default btn-sm edit-category">Cancel</button>
              <button name="delete" class="btn btn-default btn-sm">Delete</button><input type="submit" name="submit" class="btn btn-default btn-sm" value="Save">
            </div>
          </div>
        </form>                                         
      </div>
    </div>
  </div>

和 css(它的一部分)

.diagnosis-phrase, 
.treatment-phrase,
.category-item{
    padding-bottom: 1em;
    padding-top: 0.5em;
    border: 1px solid black;
    margin-bottom: 0.5em;
}  

.diagnosis-phrase input[type="text"],
.treatment-phrase input[type="text"],
.category-item input[type="text"]{
    margin-bottom:0.5em;
}

.category-item p{
    padding-left: 0.5em;
    padding-bottom:0.3em;
    border-radius:0.5em;
    width:50%;
}

bootply为了它。 html部分是两栏网页的右栏。正如您在带有黑色边框的 div 内部看到的那样，我有两个输入框(出于某种原因，第二个出现在带有边框的 div 外部，但在我的工作代码中显示正确。可能是因为我提供了部分页面。)。我的问题是第一个没有与取消按钮对齐。我如何使用 Bootstrap 类来做到这一点？

Answer 1

如果你使用下面的样式

.form-group .col-md-8:first-child {padding-left:0;}

它应该可以解决你的问题

或者，如果您只是将 div 上的 col-md-8 类更改为 col-md-pull-8，它也应该实现相同的目的