Question

我有一个可以在中端口设备上正确显示的站点。但是，在小屏幕设备上，我需要对其进行一些更改。

我需要它在一行中分别显示2个字段，第一个字段仅在xs设备上显示。

<div class="container mt-2">
    <div class="row medrow rowhead text-white border border-info" id="medrow1">
        <div class="col-sm-2 d-none d-sm-block">
            Code
        </div>
        <div class="col-sm-8 d-none d-sm-block">
            Name
        </div>
        <div class="col-sm-3 d-none d-sm-block">
            Rate (NABH)
        </div>
        <div class="col-sm-3 d-none d-sm-block">
            Rate (Non-NABH)
        </div>
        <div class="col-sm-8 d-none d-sm-block">
            Section
        </div>

    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            291
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Adenoidectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            6,486
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            5,640
        </div>
        <div class="col-sm-8">
            <a href="/app/category/9">TREATMENT PROCEDURE ENT</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            337
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Resection Enucleation of thyroid Adenoma
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            12,167
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            10,580
        </div>
        <div class="col-sm-8">
            <a href="/app/category/10">TREATMENT PROCEDURE FOR HEAD AND NECK</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            341
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Excision of Parathyroid Adenoma/Carcinoma
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            24,466
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            21,275
        </div>
        <div class="col-sm-8">
            <a href="/app/category/10">TREATMENT PROCEDURE FOR HEAD AND NECK</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            686
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Laparotomy pelvic Lymphadenectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            1,380
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            1,200
        </div>
        <div class="col-sm-8">
            <a href="/app/category/19">TREATMENT PROCEDURE OBSTETRICS AND
                GYNAECOLOGY</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            687
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Laparoscopic pelvic Lymphadenectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            4,025
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            3,500
        </div>
        <div class="col-sm-8">
            <a href="/app/category/19">TREATMENT PROCEDURE OBSTETRICS AND
                GYNAECOLOGY</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            704
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Radical Hysterectomy for Cancer cervix with pelvic
            lymphadenectomy
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            9,775
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            8,500
        </div>
        <div class="col-sm-8">
            <a href="/app/category/19">TREATMENT PROCEDURE OBSTETRICS AND
                GYNAECOLOGY</a>
        </div>
    </div>

    <div class="row medrow row-zebra border border-info" id="medrow1">
        <div class="d-xl-none d-lg-none d-md-none col-xs-12">
            Code
        </div>
        <div class="col-xs-12 col-sm-2">
            1049
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-12 text-justify">
            Procedure
        </div>
        <div class="col-xs-12 col-sm-8">
            Paraortic Lymphadenoctomy with Nephrectomy for Wilms
            Tumour
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            NABH
        </div>
        <div class="col-sm-3">
            23,000
        </div>
        <div class="d-xl-none d-lg-none d-md-none col-xs-6">
            Non-NABH
        </div>
        <div class="col-sm-3">
            20,000
        </div>
        <div class="col-sm-8">
            <a href="/app/category/58">TREATMENT PROCEDURE PAEDIATRIC SURGERY</a>
        </div>
    </div>

</div>

根据屏幕截图显示。

但是，在小屏幕上，我需要在一行中显示Code及其后的值。在下一行中，我需要Procedure及其值。我使用col-xs-12占用了可用宽度的一半，因为通过sass编辑，我的引导网格的宽度是24列而不是普通的12列。

Answer 1

对读取的类列表进行了一些修复

d-xl-none d-lg-none d-md-none col-xs-12

引导类是移动优先的，因此d-md-none还将在大于md的所有断点处隐藏元素。
col-xs-12可能只是col-12
Col-12使该列占据了整行。您可以执行诸如col-4之类的操作来获得漂亮的布局。

总共意味着我会尝试

col-4 d-md-none

如何正确地在不同视口上以不同的方式布置元素？

1 个答案: