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列