输入未填充mvc视图中的bootstrap列的整个宽度

Question

我正在努力获取输入以填充MVC 5项目中引导列的最大宽度。我添加了一个视图并将布局页面添加到视图中（没什么特别的，只是典型的MVC项目附带的普通布局页面）。如果你运行我提供的代码片段，我的输入正在填充引导列的给定宽度，但是当我在我的应用程序中运行此代码时，它没有填充列的宽度。

是否有任何特别会导致我的屏幕截图看起来像它的内容而不是我的代码段中的内容？

这是截图（多色列是我的参考点）

＆＃13;

＆＃13;

.max-size {
  width: 100% !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="form-horizontal">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-1" style="background:blue">col-md-1</div>
        <div class="col-md-1" style="background:red">col-md-1</div>
        <div class="col-md-1" style="background:purple">col-md-1</div>
        <div class="col-md-1" style="background:yellow">col-md-1</div>
        <div class="col-md-1" style="background:green">col-md-1</div>
        <div class="col-md-1" style="background:orange">col-md-1</div>
        <div class="col-md-1" style="background:blue">col-md-1</div>
        <div class="col-md-1" style="background:red">col-md-1</div>
        <div class="col-md-1" style="background:purple">col-md-1</div>
        <div class="col-md-1" style="background:yellow">col-md-1</div>
        <div class="col-md-1" style="background:green">col-md-1</div>
        <div class="col-md-1" style="background:orange">col-md-1</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        ABC
      </div>

      <div class="col-md-6">
        <div class="row max-size">
          <div class="col-md-12">

            <div class="form-group">
              <div class="col-md-12">
                <input class="form-control max-size" style="width:100%;" placeholder="Department" />
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12">
                <input class="form-control max-size" placeholder="Department" />
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12">
                <input class="form-control max-size" placeholder="Department" />
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12">
                <input class="form-control max-size" placeholder="Department" />
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12">
                <input class="form-control max-size" placeholder="Department" />
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12">
                <input class="form-control max-size" placeholder="Department" />
              </div>
            </div>

          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <div class="col-md-5">
                <div class="btn btn-block btn-danger">
                  <center>Cancel</center>
                </div>
              </div>

              <div class="col-md-5">
                <div class="btn btn-block btn-success">
                  <center>Submit</center>
                </div>
              </div>

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


      </div>

      <div class="col-md-3">
        CBA
      </div>

    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

他们不能全宽，因为他们的父母有一个col-md-6 put 12，它会起作用 我的意思是

<div class="col-md-6">
        <div class="row max-size">
          <div class="col-md-12">

还尝试阅读有关嵌套的更多信息，这是一个链接http://getbootstrap.com/2.3.2/scaffolding.html