如何防止重叠两列的内容

我有一行两列在里面。右列的内容与左列重叠。这是我的代码。如何防止重叠两列的内容

即使在大屏幕上我看到（在下面的代码中）<div class="row hidden-xs" style="border-bottom: 2px solid lightgray;"> 这个边界重叠到左边。

这里是如何看起来

如何避免重复的内容？

<div class="row"> 
    <div class="col-lg-2" style="letter-spacing: 1px;"> 
     <img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/> 
     <h5><b>ISBN:</b>1234567891</h5> 
     <h5><b>Kapak Türü:</b> Sert Kapak</h5> 
     <h5><b>Baskı No:</b>16</h5> 
     <h5><b>Yayınevi:</b>Publishing </h5> 
     <h5><b>Yıl:</b> 2005</h5> 
    </div> 
    <div class="col-lg-10"> 
     <ul class="nav nav-tabs"> 
     <li class="active"><a href="#satinAl" data-toggle="tab">Yeni ve 2. El</a></li> 
     <li><a href="#kirala" data-toggle="tab">Kirala</a></li> 
     <li><a href="#detay" data-toggle="tab">Kitap Detaylı Bilgileri</a></li> 
     <li><a href="#yorum" data-toggle="tab">Kitap Yorumları</a></li> 
     </ul>@*nav nav-tabs*@ 
     <div class="tab-content"> 
     <div class="tab-pane active" id="satinAl"> 
      <div class="row hidden-xs" style="border-bottom: 2px solid lightgray;"> 
       <div class="col-md-3"> 
        <h5><b>Fiyat + Kargo</b></h5> 
       </div> 
       <div class="col-md-3"> 
        <h5><b>Kitabın Durumu</b></h5> 
       </div> 
       <div class="col-md-3"> 
        <h5><b>Tahmini Teslim Tarihi</b></h5> 
       </div> 
       <div class="col-md-3"> 
        <h5><b>Satıcı Bilgileri</b></h5> 
       </div> 
       </div> @*Başlık 1. row*@ 
        <div class="row"> 
        <div class="col-md-3"> 
         <h5><b>39.87 TL</b></h5> 
         <h6>3.99 TL Kargo</h6> 
        </div> 
        <div class="col-md-3"> 
         <h5><b>Çok İyi</b></h5> 
         <h6>Kitap çok iyi durumdadır. Çizgi karalam yoktur. Çok iyi müşteri hizmetleri. Alan Memnun</h6> 
        </div> 
        <div class="col-md-3"> 
         <h5><b>Feb. 24 - Mar. 3.</b></h5> 
         <h6>Satıcı İade Politikası</h6> 
        </div> 
        <div class="col-md-3"> 
         <h5><b>Jenny Blue</b></h5> 
         <span class="glyphicon glyphicon-star"></span> 
         <span class="glyphicon glyphicon-star"></span> 
         <span class="glyphicon glyphicon-star"></span> 
         <span class="glyphicon glyphicon-star"></span> 
         <span class="glyphicon glyphicon-star"></span> 
         <a href="#">100% Pozitif</a> 
        </div> 
        </div> @*Ilk Satıcı 2. row*@ 
       </div>@*tab-pane active Satın Al*@ 
       <div class="tab-pane" id="kirala"> 
        <p>Çok yakında hizmetinizde</p> 
       </div> 
      </div>@*tab-content*@      
     </div>@*col-md-10*@ 
    </div>@*row*@

来源

2017-02-16 Landowner

是您想要的吗？：http：//www.codeply.com/go/uoY9rAWXc2 – Banzay

要使列的行为响应，你需要删除图像的固定尺寸：

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

，并设置类= “IMG响应” 它：

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

here is a working example

来源

2017-02-16 10:50:44 Banzay

这是因为图像比列大。

你需要或者使用引导img-responsive类和删除宽度和高度属性在img

或

做出的cols更大，例如：使用col-lg-4第一列和col-lg-8为第二列。

来源

2017-02-16 10:57:03 Alaeddine

如何防止重叠两列的内容

回答

相关问题