Bootstrap3 CSS - カラムのサイズが正しく設定されていない

Question

私はブートストラップが初めてですが、使い方はかなり簡単です。 1つのdivに複数の幅のクラスを定義し、サイトの応答性を処理することを理解しています。

ただし、デスクトップからモバイルビューに切り替えると、行のサイズが正しく変更されません。

私は大きな画面と中間画面の同じ行に、小さな画面と小さい画面の2つの列に2つの列があります。 divのために、次のように

私のコードは次のとおりです。

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

、ここでは、デスクトップとモバイルに何が起こるかです。

それは私のクラスやその内容の順序をどうするのですか？ ご協力ありがとうございます

Answer 1

私はこの解決策を提供しています。

変更col-md-4からcol-lg-4これは、ブートストラップは、後の指定された解像度が指定されていない場合、それはcol-xs-12に行くサイズデフォルトプロパティを持っているので、その後col-sm-12を削除し、デスクトップとタブレットモードで同じ表示の問題を修正します。

次のコードを試してください。あなたは、同じ行にしたい2列

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