将3列放在面板主体内

Question

我有一个面板主体，包含3列，跨越自举网格系统的5/12。我试图将这些列居中，但使用text-center和center-block对我来说并不成功。以下是我的面板设置（概括）。

<div class="col-md-12">
<div class="panel panel-default">
    <div class="panel-heading text-center">
        <h3 class="panel-title">Panel Title</h3>
    </div>

    <div class="panel-body">
        <div class="col-md-2">
            <div>
                <label>Label</label>
            </div>
            <div>
                <select id="id" size="8" style="width: 99%;">
                                            <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                </select>
            </div>
            <div>
                <a class="btn btn-primary">click</a>
            </div>
        </div>
        <div class="col-md-1" style="margin-top: 3%;">
            <div>
                <a class="btn btn-primary">
                    All →</a>
            </div>
            <div>
                <a class="btn btn-primary">
                    All ←</a>
            </div>
        </div>
        <div class="col-md-2">
            <div>
                <label>Label</label>
            </div>
            <div>
                <select id="id2" size="8" style="width: 99%">
                    <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>
                                          <option>
                        potato
                    </option>

                </select>
            </div>
        </div>
    </div>
</div>

Here is a working example - stripped down but working

Answer 1

＆＃13;

＆＃13;

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading text-center">
          <h3 class="panel-title">Panel Title</h3>
        </div>

        <div class="panel-body bodyy">
          <div class="col-md-5ths"></div>
          <div class="col-md-5ths">
            <div>
              <label>Label</label>
            </div>
            <div>
              <select id="id" size="8" style="width: 99%;">
                <option ng-repeat="thing in things">
                  {{thing}}
                </option>
              </select>
            </div>
            <div>
              <a class="btn btn-primary" ng-click="click()">click</a>
            </div>
          </div>
          <div class="col-md-5ths text-center" style="margin-top: 3%;">
            <div>
              <a class="btn btn-primary"
                 ng-click="click('woo')">
                All &rarr;</a>
            </div>
            <div>
              <a class="btn btn-primary"
                 ng-click="clicky('wooo')">
                All &larr;</a>
            </div>
          </div>
          <div class="col-md-5ths">
            <div>
              <label>Label</label>
            </div>
            <div>
              <select id="id2" size="8" style="width: 99%">
                <option ng-repeat="stuff in stuffs">
                  {{stuff}}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

你应该添加Bootstrap最新的CSS，如果我添加了bootstrap css文件，它应该在我的最后工作正常。立即更新回答，或Fiddle

Answer 2

对于包裹div的{​​{1}}，如果你给了这个课程，你可以申请，例如<a class="btn btn-primary">

在我的测试工具中为我修复了它。