Question

我有一个双列引导页面，如下所示。左边包含两行（图像和图像下面填充整列宽度的文本边框），右边是登录详细信息。

图像宽度为700px，对于较小的设备或屏幕宽度，我会更改为较小的图像。一切正常。但是，当我调整浏览器大小时，右侧登录列与左侧列的700px图像重叠约40个像素，然后才会捕捉到单个列。

我尝试通过为左侧列添加最小宽度来解决此问题：

<div class="col-md-8" style="min-width: 768px">

哪个有效并且它正确捕捉，但是这样做左手边主边界文本（这是图像下面的一行）然后变成固定宽度并且没有调整大小。

我怎样才能得到它，以便两列不重叠，文本仍然以我的边框文本流动。

感谢。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
                <DIV class="row">
                    <div class="col-md-12">
                        <img class="loginPic hidden-xs"  src="images/pic.png" >
                        <img class="loginPic visible-xs"  src="images/pic-small.png" >
                    </DIV>
                </div>
                <br />
                <DIV class="row">
                    <div class="col-md-12">
                        <div style="border: 1px solid #00549d; border-radius:10px;">
                            <div style="padding:20px;font-size: 13px;">
                                <p>Lots of text.</p>
                            </div>
                        </div>
                    </div>
                </DIV>
        </div>

        <div class="col-md-4 pull-left" >login stuff here</div>

    </div>
</div>

在更改为bootstrap css中的单个列之前，两列重叠

0 个答案: