Html 简单引导页面上的布局和包装不正确

我试图创建一个简单的引导页面，它有四个输入字段，每个字段都有一个侧按钮。四个输入字段水平排列并在屏幕上居中

在我编写的代码中，字段向右偏移（因此不居中），当屏幕收缩时，包装看起来很糟糕。我的代码如下所示：

WIA
.wia颜色{
颜色：#00DDDD；
}
.wia导航栏标志{
利润上限：-6px；
最大高度：44px；
高度：44px；
}
.wia顶部部分{
高度：800px；
背景色：透明；
}
.wia标志带{
边际上限：0px；
最大高度：123px；
高度：123px；
}
.wia strapline文本{
颜色：白色；
字体大小：40px！重要；
字体系列：开放式SAN；
字号：100；
字体风格：普通；
边缘顶部：38px；
}
.wia过滤柱{
宽度：280px；
}
.wia筛选器行{
颜色：白色；
边缘顶部：50px；
字号：18px；
字体大小：400；
}
.wia过滤器容器{
宽度：250px；
空白：nowrap；
浮动：左；
}
.wia过滤器标签{
颜色：白色；
字号：18px；
字号：200；
浮动：左；
左侧填充：10px；
利润底部：4倍；
}
.wia过滤器值{
值：“xxx”；
宽度：200px；
高度：30px；
背景色：#141414；
边框样式：实心；
左边框宽度：3px；
左边框颜色：#00DDDD；
边界顶部：无；
边框底部：无；
边界权：无；
颜色：白色；
字号：18px；
字号：200；
左侧填充：4px；
}
.wia过滤器按钮{
宽度：30px；
高度：30px；
背景色：#222626；
颜色：#00DDDD；
边界：无；
垂直对齐：顶部；
左边距：-5px；
字号：100；
}
/*删除导航栏的默认边距底部和圆角边框*/
navbar先生{
页边距底部：0；
边界半径：0；
}
.导航条反转{
背景色：#222626；
高度：64px；
最大高度：64px；
最小高度：64px；
}




什么


哪里


什么时候


谁


再来点东西

这就是我要做的。使用引导网格进行布局，并添加我自己的类来更改颜色。 这将帮助您理解并创建更好的网格

在代码中，我使用了bootstrap提供的所有东西，以及我在第二个按钮上的自定义类，以便您能够理解

请检查此处的代码：

这就是我要做的。使用引导网格进行布局，并添加我自己的类来更改颜色。 这将帮助您理解并创建更好的网格

在代码中，我使用了bootstrap提供的所有东西，以及我在第二个按钮上的自定义类，以便您能够理解

请检查此处的代码：

<div class="container" style="margin-top: 30px;">
  <div class="row">
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." placeholder="One">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control form-custom" aria-label="..." placeholder="Button with class">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default btn-custom dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." placeholder="One">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <div class="col-md-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." placeholder="One">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>

  </div>
  <!-- /.row -->
</div>

.wia-filter-row {
 text-align:center;
}
.wia-filter-row .col-sm-2{
 float:none;
 display: inline-block;
}