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。

尝试以下代码。

＆＃13;

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

＆＃13;

Bootstrap3 CSS - 列没有正确调整大小

1 个答案: