Question

我正在尝试将col-md-4放在col-md-12内，但是它不起作用。

HTML：

OverlayView
           -> label ------> top to overlayView ,left,right
           -> button -----> top to label , left , right
           -> label  -----> top to button , left , right , bottom to overlayView

有人知道如何将规则并排放置吗？

谢谢

Answer 1

使用

<div class="col-xs-4"></div>

或“ col-md-4” xs只是要在此小预览中显示

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form role="form" action="" method="post">
      <div class="row">
          <div class="col-xs-12 col-md-offset-3">
              <div class="col-md-12">
                  <h3>Information</h3>
                  <!-- This is fine because I want the name to be full size of the line -->
                  <div class="form-group">
                      <label class="control-label">Name</label>
                      <input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
                  </div>

                  <!-- Here I want to break 3 input side by side -->
                  <!-- Not working. Each rules is in one line -->
                  <div class="form-group">
                      <label class="control-label">Rules</label>
                      <div class="row">
                        <div class="col-xs-4">
                            <input type="number" class="form-control" required="required" placeholder="Rule1" />
                        </div>
                        <div class="col-xs-4">
                            <input type="number" class="form-control" required="required" placeholder="Rule2" />                    </div>
                        <div class="col-xs-4">
                            <input type="number" class="form-control" required="required" placeholder="Rule3" />                    </div>
                        </div>
                      </div>
                  </div>
                  <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
              </div>
          </div>
      </div>
  </form>
</div>

在col-md-12内的Bootstrap col-md-4

1 个答案: