在col 12内部引导col 4

Question

我正试着在一台col-md-12里面装一台col 4，但它不起作用。

HTML：

<form role="form" action="" method="post">
    <div class="row">
        <div class="col-xs-6 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-md-12">
                          <input type="number" required="required" class="col-md-4" placeholder="Rule1" />
                          <input type="number" required="required" class="col-md-4" placeholder="Rule2" />
                          <input type="number" required="required" class="col-md-4" placeholder="Rule3" />
                      </div>
                    </div>
                </div>
                <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
            </div>
        </div>
    </div>
</form>

有人知道我怎样才能把规则并排排在一起吗？

谢谢

Answer 1

使用

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

或者“col 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>

​