如何防止重叠两列的内容

Question

我有一行和两列。右栏的内容与左栏重叠。这是我的代码。

即使在大屏幕上，我也看到了（在下面的代码中）function hasClass(ele, cls) { return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(ele, cls) { if (!hasClass(ele, cls)) ele.className += " " + cls; } function removeClass(ele, cls) { if (hasClass(ele, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); ele.className = ele.className.replace(reg, ' '); } } function init() { document.getElementById("header_navigation_mobile_button").addEventListener("click", toggleMenu); } function toggleMenu() { var ele = document.getElementsByClassName('page_container')[0]; if (!hasClass(ele, "open")) { addClass(ele, "open"); } else { removeClass(ele, "open"); } } document.addEventListener('readystatechange', function() { if (document.readyState === "complete") { init(); } }); 这个边框重叠到左边。

这是它的外观

如何防止重叠内容？

<div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">

Answer 1

要使列具有响应性，您需要删除图像的固定尺寸：

<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>

并将class =“img-responsive”设置为：

<img src="~/Content/images/kitap/kitap2.jpg" class="img-responsive"/>

here is a working example

Answer 2

这是因为图像比列大。

您需要使用bootstrap img-responsive类并删除img

中的 width 和 height 属性

或

使cols更大，例如：第一列使用col-lg-4，第二列使用col-lg-8。