Bootstrap3 CSS - Spalten passen nicht richtig an

Question

Ich bin neu Bootstrap, aber es ist ziemlich einfach zu bedienen. Mein Verständnis ist, dass Sie mehrere Breite Klassen in einem Div definieren und die Website Reaktionsfähigkeit behandelt.

Meine Zeilen werden jedoch nicht korrekt skaliert, wenn ich von Desktop auf Mobile Ansicht umschalte.

Ich habe zwei Spalten, die ich in der gleichen Zeile auf großen und mittleren Bildschirmen und zwei Zeilen für kleine und extra kleine Bildschirme wollen.

Mein Code ist wie für die divs folgt:

<div class="container"> 
 
     <div class="row vertical-align"> 
 
      <div class="col-lg-4 col-sm-12 text-center"> 
 
       <img class="dream" src="~/Content/Images/Pokemon/Dream/@(Model.dexNo).png" /> 
 
       <img class="sprite" src="~/Content/Images/Pokemon/Sprites/@(Model.spriteString)" /> 
 
       <div style="display:block"> 
 
        <img class="type" src="~/Content/Images/Types/@(Model.type1Id).png" /> 
 
        @if (Model.type2Id.HasValue) 
 
       { 
 
         <img class="type" src="~/Content/Images/Types/@(Model.type2Id.Value).png" /> 
 
        } 
 
       </div> 
 

 
      </div> 
 
      <div class="col-lg-8 col-sm-12"> 
 
       <h4 class="pull-right">no. @Model.dexNoThreeDigits</h4> 
 
       @if (Model.isOwner) 
 
       { 
 
        <a data-toggle="modal" data-target="#renameModal" style="color:black;cursor:pointer;text-decoration:none;"><h1 class="large-text text-center">@Model.nickName</h1></a> 
 
       } 
 
       else 
 
       { 
 
        <h1 class="large-text text-center">@Model.nickName</h1> 
 
       } 
 
       <h1 class="large-text text-center" style="font-style:italic;opacity:0.2;position:relative;top:-34px;left:81px;">the @Model.speciesName</h1> 
 
       
 
       <h3 class="no-bottom-margin">Level @Model.level</h3> 
 

 
       <div class="progress no-bottom-margin"> 
 
        <div class="progress-bar" role="progressbar" aria-valuenow="@Model.expToNextLevelPercent" 
 
         aria-valuemin="0" aria-valuemax="100" style="width:@(Model.expToNextLevelPercent)%"> 
 
         <span class="sr-only">@(Model.expToNextLevelPercent)% Complete</span> 
 
        </div> 
 
       </div> 
 
       
 
       @if (Model.level != 100) 
 
       { 
 
        <h3 class="pull-right no-top-margin">@Model.expToNextLevelInt EXP → Level @(Model.level + 1)</h3> 
 
       } 
 

 
       <h3 class="no-top-margin">@Model.experience EXP</h3> 
 

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

und hier ist das, was auf dem Desktop und mobile passiert.

ist es mit der Bestellung meiner Klassen oder deren Inhalt zu tun? Danke für jede Hilfe

Answer 1

Basierend auf meinem Verständnis für Ihre Frage, die ich diese Lösung zur Verfügung stelle.

Änderung der col-lg-4-col-md-4 das Problem der gleichen Anzeige in Desktop- und Tablet-Modus behebt dann die col-sm-12 entfernen, da Bootstrap eine Standardeigenschaft hat, die nach dem angegebenen Auflösung Größen es col-xs-12 geht, wenn nicht angegeben.

Versuchen Sie den folgenden Code.

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-4 text-center"> 
 
       <img class="dream" src="~/Content/Images/Pokemon/Dream/@(Model.dexNo).png" /> 
 
       <img class="sprite" src="~/Content/Images/Pokemon/Sprites/@(Model.spriteString)" /> 
 
       <div style="display:block"> 
 
        <img class="type" src="~/Content/Images/Types/@(Model.type1Id).png" /> 
 
        @if (Model.type2Id.HasValue) 
 
       { 
 
         <img class="type" src="~/Content/Images/Types/@(Model.type2Id.Value).png" /> 
 
        } 
 
       </div> 
 

 
      </div> 
 
      <div class="col-md-8"> 
 
       <h4 class="pull-right">no. @Model.dexNoThreeDigits</h4> 
 
       @if (Model.isOwner) 
 
       { 
 
        <a data-toggle="modal" data-target="#renameModal" style="color:black;cursor:pointer;text-decoration:none;"><h1 class="large-text text-center">@Model.nickName</h1></a> 
 
       } 
 
       else 
 
       { 
 
        <h1 class="large-text text-center">@Model.nickName</h1> 
 
       } 
 
       <h1 class="large-text text-center" style="font-style:italic;opacity:0.2;position:relative;top:-34px;left:81px;">the @Model.speciesName</h1> 
 
       
 
       <h3 class="no-bottom-margin">Level @Model.level</h3> 
 

 
       <div class="progress no-bottom-margin"> 
 
        <div class="progress-bar" role="progressbar" aria-valuenow="@Model.expToNextLevelPercent" 
 
         aria-valuemin="0" aria-valuemax="100" style="width:@(Model.expToNextLevelPercent)%"> 
 
         <span class="sr-only">@(Model.expToNextLevelPercent)% Complete</span> 
 
        </div> 
 
       </div> 
 
       
 
       @if (Model.level != 100) 
 
       { 
 
        <h3 class="pull-right no-top-margin">@Model.expToNextLevelInt EXP → Level @(Model.level + 1)</h3> 
 
       } 
 

 
       <h3 class="no-top-margin">@Model.experience EXP</h3> 
 

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