Question

当我收缩网页时（特别是在xs设备中），它会切断右侧数据。但是，它在小型，中型和大型设备中具有响应性。我添加了table-responsive类但仍然相同。

这是截图

你能检查一下它出错的地方吗？

由于

这是我的代码;

<div class="row">
     <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 table-responsive">
           <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Ürün</th>
                        <th>Adet</th>
                        <th class="text-center">Ücreti</th>
                        <th class="text-center">Toplam</th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-xs-12 col-sm-8 col-md-6">
                            <div class="media">
                                <a class="img-thumbnail pull-left" href="#"><img class="media-object img-product-cart" src="~/Content/images/kitap/kitap2.jpg"/></a>
                                <div class="media-body">
                                    <h4 class="media-heading"><a href="#">Matematik</a></h4>
                                    <h5 class="media-heading">Yazar: Halil Kayaduman</h5>
                                    <h5 class="media-heading">ISBN: 1234567897</h5>
                                    <span>Durum:</span><span class="text-success"><strong>Stokta 10 adet var.</strong></span>
                                </div>
                            </div>
                        </td>
                        <td class="col-xs-3 col-sm-1 col-md-1" style="text-align:center;">
                            <input type="email" class="form-control" id="exampleInputEmail" value="3" />
                        </td>
                        <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>45.12 TL</strong></td>
                        <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>135.36 TL</strong></td>
                        <td class="col-xs-3 col-sm-1 col-md-1">
                            <button type="button" class="btn btn-danger">
                                <span class="glyphicon glyphicon-remove"></span> Kaldır
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td><h5>Ürün Fiyatı<br />Kargo Ücreti</h5><h3>Toplam</h3></td>
                        <td class="text-right"><h5><strong>45.98 TL <br /> 3.99 TL</strong></h5><h3>123.12 TL</h3></td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td>
                            <button type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-shopping-cart"></span> Alişverişe Devam
                            </button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-success">
                                Ödeme Sayfasına Geç <span class="glyphicon glyphicon-play"></span>
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>
       </div>
  </div>

Answer 1

这是因为您将.table-responsive课程提供给了父母标记：<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">

只需在表类属性中剪切并遍历该类，例如<table class="table table-responsive table-hover">

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 ">
    <table class="table table-responsive table-hover">
      <thead>
        <tr>
          <th>Ürün</th>
          <th>Adet</th>
          <th class="text-center">Ücreti</th>
          <th class="text-center">Toplam</th>
          <th> </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-xs-12 col-sm-8 col-md-6">
            <div class="media">
              <a class="img-thumbnail pull-left" href="#">
                <img class="media-object img-product-cart" src="~/Content/images/kitap/kitap2.jpg" />
              </a>
              <div class="media-body">
                <h4 class="media-heading"><a href="#">Matematik</a></h4>
                <h5 class="media-heading">Yazar: Halil Kayaduman</h5>
                <h5 class="media-heading">ISBN: 1234567897</h5>
                <span>Durum:</span>
                <span class="text-success">
                  <strong>Stokta 10 adet var.</strong>
                </span>
              </div>
            </div>
          </td>
          <td class="col-xs-3 col-sm-1 col-md-1" style="text-align:center;">
            <input type="email" class="form-control" id="exampleInputEmail" value="3" />
          </td>
          <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>45.12 TL</strong></td>
          <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>135.36 TL</strong></td>
          <td class="col-xs-3 col-sm-1 col-md-1">
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-remove"></span> Kaldır
            </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td>
            <h5>Ürün Fiyatı<br />Kargo Ücreti</h5>
            <h3>Toplam</h3>
          </td>
          <td class="text-right">
            <h5><strong>45.98 TL <br /> 3.99 TL</strong></h5>
            <h3>123.12 TL</h3>
          </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td>
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-shopping-cart"></span>
              Alişverişe Devam
            </button>
          </td>
          <td>
            <button type="button" class="btn btn-success">
              Ödeme Sayfasına Geç 
              <span class="glyphicon glyphicon-play"></span>
            </button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

＆＃13;

Answer 2

尝试在自己的div中放置表响应，看看它是如何工作的，我可以想象网格结构可能是你问题的原因。

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
    <div class="table-responsive">
        <table class="table table-hover">

            <thead>
                <tr>
                    <th>Ürün</th>
                    <th>Adet</th>
                    <th class="text-center">Ücreti</th>
                    <th class="text-center">Toplam</th>
                    <th> </th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td class="col-xs-12 col-sm-8 col-md-6">
                        <div class="media">
                            <a class="img-thumbnail pull-left" href="#"><img class="media-object img-product-cart" src="~/Content/images/kitap/kitap2.jpg"/></a>
                            <div class="media-body">
                                <h4 class="media-heading"><a href="#">Matematik</a></h4>
                                <h5 class="media-heading">Yazar: Halil Kayaduman</h5>
                                <h5 class="media-heading">ISBN: 1234567897</h5>
                                <span>Durum:</span><span class="text-success"><strong>Stokta 10 adet var.</strong></span>
                            </div>
                        </div>
                    </td>

                    <td class="col-xs-3 col-sm-1 col-md-1" style="text-align:center;">
                        <input type="email" class="form-control" id="exampleInputEmail" value="3" />
                    </td>

                    <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>45.12 TL</strong></td>

                    <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>135.36 TL</strong></td>

                    <td class="col-xs-3 col-sm-1 col-md-1">
                        <button type="button" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove"></span> Kaldır
                        </button>
                    </td>

                </tr>


            </tbody>

            <tfoot>
                <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td><h5>Ürün Fiyatı<br />Kargo Ücreti</h5><h3>Toplam</h3></td>
                    <td class="text-right"><h5><strong>45.98 TL <br /> 3.99 TL</strong></h5><h3>123.12 TL</h3></td>
                </tr>

                <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td>
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Alişverişe Devam
                        </button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-success">
                            Ödeme Sayfasına Geç <span class="glyphicon glyphicon-play"></span>
                        </button>
                    </td>
                </tr>
            </tfoot>

        </table>
    </div>
</div>
</div>

响应表在xs设备中切断数据

2 个答案: