2017-10-04 1 views
0

Ich habe die härteste Zeit, meine Eingaben zu erhalten, um die maximale Breite einer Bootstrap-Spalte in einem MVC 5-Projekt zu füllen. Ich habe eine Ansicht hinzugefügt und die Layoutseite zur Ansicht hinzugefügt (nichts Schickes, nur die normale Layoutseite, die mit einem typischen MVC-Projekt geliefert wird). Wenn Sie das von mir bereitgestellte Snippet ausführen, füllen meine Eingaben die angegebene Breite der Bootstrap-Spalte. Wenn ich diesen Code jedoch in meiner App ausführe, wird die Breite der Spalte nicht ausgefüllt.Eingänge füllen nicht die gesamte Breite der Bootstrap-Spalte in MVC anzeigen

Gibt es irgendetwas Bestimmtes, das dazu führen würde, dass mein Screenshot so aussieht und nicht wie er in meinem Snippet ist?

hier ist der Screenshot (die bunten Spalten für einen Bezugspunkt für mich)

In my MVC view

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

Antwort

0

sie nicht die volle Breite der Eltern führen gehen haben ein Col-MD-6 Put 12 und es wird funktionieren ich meine hier

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

auch versuchen, mehr lesen über hier nisten wird einen Link http://getbootstrap.com/2.3.2/scaffolding.html

+0

Wenn das der Fall ist, dann warum meine Tasten, die in der col-md-6 ist, richtig strecken? – Chris

+0

Ursache sie sind in einer neuen Zeile von Col-MD-12, während sie in Col-MD-6 eingegeben werden –

Verwandte Themen