为什么我的Bootstrap列是堆叠的而不是并排的?

cbwuti44  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(1)|浏览(145)

它是简单的div容器,div行,div col-md-9,div col-md-3。这段代码在过去的8年或更长时间里一直有效,突然之间它就不起作用了。
它是Razor中最终批准函的顶部,通常适合信封窗口,右侧有发件人的徽标和地址。

<div class="container">
    <div class="row" style="border: solid 4px blue;">
        <div class="col-md-9" style="border:solid 2px red;">
            <br /><br />
            <br /><br />
            <p>
                @DateTime.Today.ToString("MMMM dd, yyyy")<br />
                <br /><br /><br />
                @Model.Courses.CurrentContactName<br />
                @Model.Courses.ContactBizName<br />
                @Model.Courses.ContactAddress<br />
                @Model.Courses.ContactCity,  @Model.Courses.ContactState @Model.Courses.ContactZip<br />
            </p>
        </div>

        <div class="col-md-3" style="border:solid 2px green;">
            <img src="~/images/oesac_white_2.25.jpg" />
            <br />
            <p style="font-size: 1.3rem;">
                OESAC CEU Committee<br />
                P. O. Box 577 <br />
                Canby, OR 97013-0577 <br />
                Phone: 503/698-6486 <br />
                Email: [email protected] <br />
                http://www.oesac.org

            </p>
        </div>

    </div> @*ROW*@

字符串

这是创建的网页。它有一个“打印”按钮,后面有JavaScript onclick="window.print();。(我将列的边框颜色设置为红色和绿色以进行测试)

x1c 0d1x的数据

这里是打印版本,我使用Chrome中打印预览的屏幕截图来演示。(实际打印页面也是如此)。



如果我没有正确解释,请帮助我解释这个问题。引导列的目的是将收件人的地址放在信封窗口的中间,这是可行的,但发件人的徽标/地址被堆叠在下面。

lrpiutwd

lrpiutwd1#

好了,我做到了:我将“<div class=“col-md-9””改为“div class=“col-sm-9””
右列也是这样:“<div class=“col-sm-9”to“<div class =“col-sm-3”
不知道为什么,因为这一页在过去的8年里一直正确打印。

相关问题