Bootstrap3 CSS - 列沒有正確調整大小

Question

我是bootstrap的新手，但使用起來相當簡單。 我的理解是你在一個div中定義多個寬度類，並處理站點響應。

但是，從桌面切換到移動視圖時，我的行沒有正確調整大小。

我有兩列，我想在大屏幕和中屏幕的同一行上，以及兩行的小屏幕和超小屏幕上。

我的代碼是的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-lg-4到col-md-4這種修復在臺式機和平板電腦模式相同的顯示問題，然後刪除自col-sm-12引導有指定後分辨率大小不言而喻col-xs-12如果沒有指定一個默認屬性。

嘗試下面的代碼。

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

你在同一行要哪2列