在 col-md-12 中引导 col-md-4

Posted 2023-03-05

【中文标题】在 col-md-12 中引导 col-md-4

【英文标题】：Bootstrap col-md-4 inside a col-md-12

【发布时间】：2018-12-01 06:57:35

【问题描述】：

我试图在 col-md-12 中添加一个 col-md-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>

有谁知道如何将规则并排排列在一行中？

谢谢

【问题讨论】：

Display two fields side by side in a Bootstrap Form的可能重复

【参考方案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>