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

Question

在MVC 5项目中，我最难获得输入来填充引导列的最大宽度。我添加了一个视图并将布局页面添加到视图中(没有什么奇怪的，只是一个典型的MVC项目附带的普通布局页面)。如果您运行我提供的代码段，我的输入将填充引导列的给定宽度，但当我在我的应用程序中运行这段代码时，它不会填充该列的宽度。

有什么特别的东西会使我的截图看起来像它，而不是它在我的片段中的样子？

这是截图(五颜六色的列是供我参考的)

​

​

​

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

<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>

​

Answer 1

它们不能全宽，因为他们的父母有个头-md-6，放12，我的意思是在这里工作。

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

另外，尝试阅读更多关于嵌套的内容，这里有一个链接http://getbootstrap.com/2.3.2/scaffolding.html