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，因为bootstrap有一个默认属性，即在指定分辨率大小之后，如果未指定，它将转到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>

​