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，那么它也应该实现相同的目标

使用bootstrap类在html中对齐元素

1 个答案: