html - 如何防止两列内容重叠

Question

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

即使在大屏幕上我也看到(在下面的代码中)<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*@

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