在引导css中，两列在更改为单列之前重叠

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

图像的宽度为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>

大量的文本

在这里登录

否，引入您自己对列布局（最小宽度）的修改显然不是一条可行之路，这将在某个地方导致不必要的/意外的副作用。仅凭代码很难判断到底是什么导致列重叠（创建一个列可能会有所帮助），但这可能是因为您的图像比列定义允许的宽度更宽。可以添加

img responsive

类，这样它就不会比列宽。太棒了！关于引导类，我有很多东西要学。我现在可以摆脱我的小形象。我会将您的解决方案作为答案来写？当然，如果您想自己将其作为答案，请继续：）@CBroe谢谢您我有一个类似的问题，使用较小的内容（减小图像大小/文本字体大小）可以正确匹配，不再发生重叠。不，介绍您自己对列布局的修改（最小宽度）这肯定不是我们要走的路，这将在某个地方导致不必要的/意外的副作用。仅凭代码很难判断到底是什么导致列重叠（创建一个列可能会有所帮助），但这可能是因为您的图像比列定义允许的宽度更宽。可以添加

img responsive

类，这样它就不会比列宽。太棒了！关于引导类，我有很多东西要学。我现在可以摆脱我的小形象。我会将您的解决方案作为答案来写？当然，如果您想自己将其作为答案，请继续：）@CBroe谢谢您我也有类似的问题，使用允许正确匹配的较小内容（减小图像大小/文本字体大小），并且不再发生重叠。