如何将 HTML 表格转换为 Bootstrap 网格系统，同时保持间距？

问题描述 投票：0回答：1

为了遵守《美国残疾人法案》，我必须在购物车中使用无序列表，因为表格没有屏幕阅读器那么多的功能。

因此，为了将 HTML 表转换为列表，我决定在每个列表项中使用一个容器，然后在每个项内创建一个容器/行。问题是我之前使用的 CSS 不再起作用，而且我无法让它看起来与之前完全一样。

生产

    <head>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    </head>
  <body>
            <div class="cart-hover" tabindex="-1">
                <div class="cart-hover-header">
                    <b>Subtotal: $13,654.99</b>
                    <a class="btn btn-primary pagearea" href="#" title="View Cart" data-pagearea="87">View Cart</a>
                </div>
                <table class="table table-striped">
                    <tbody><tr>
                            <td class="align-middle pl-3">
                                <div class="cart-item-img">
                                        THUMB
                                    </div>                            </td>
                            <td class="align-middle text-center">1</td>
                            <td class="align-middle text-wrap">
                                <a id="cart-item-307181" class="text-reset pagearea" href="#" title="Gibson Dave Mustaine Flying V EXP Electric Guitar (with Case)" data-pagearea="86">
                                    Gibson Dave Mustaine Flying V EXP Electric Guitar (with Case)
                                </a>
                            </td>
                            <td class="align-middle text-center pr-3">$2,799.00</td>
                        </tr>
                    <tr>
                            <td class="align-middle pl-3">
                                <div class="cart-item-img">
                                        THUMB
                                    </div>                            </td>
                            <td class="align-middle text-center">1</td>
                            <td class="align-middle text-wrap">
                                <a id="cart-item-238870" class="text-reset pagearea" href="#" title="Steinberger Spirit XT-2 Standard Electric Bass (with Gig Bag)" data-pagearea="86">
                                    Steinberger Spirit XT-2 Standard Electric Bass (with Gig Bag)
                                </a>
                            </td>
                            <td class="align-middle text-center pr-3">$449.00</td>
                        </tr>
                    <tr>
                            <td class="align-middle pl-3">
                                <div class="cart-item-img">
                                        THUMB
                                    </div>                            </td>
                            <td class="align-middle text-center">1</td>
                            <td class="align-middle text-wrap">
                                <a id="cart-item-246567" class="text-reset pagearea" href="#" title="Gibson J-45 Standard Acoustic-Electric Guitar (with Case)" data-pagearea="86">
                                    Gibson J-45 Standard Acoustic-Electric Guitar (with Case)
                                </a>
                            </td>
                            <td class="align-middle text-center pr-3">$2,549.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>
  </body>

发展

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</head>

<body>
  <div class="cart-hover" tabindex="-1">
    <div class="cart-hover-header">
      <b>Subtotal: $6,247.00</b>
      <a class="btn btn-primary pagearea" title="View Cart" data-pagearea="87">View Cart</a>
    </div>

    <ul class="list-unstyled">
      <li style="justify-content: space-between; background-color: rgba(0,0,0,.05);">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 col align-middle text-center">1</div>

            <div class="col col-7 col align-middle text-wrap">
              Gibson Dave Mustaine Flying V EXP Electric Guitar (with some extra text for a second line)
            </div>

            <div class="col col-1 align-middle text-center pr-3">$2,799.00</div>
          </div>
        </div>
      </li>

      <li style="justify-content: space-between; ">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 align-middle text-center">1</div>

            <div class="col col-7 align-middle text-wrap">
              Steinberger Spirit XT-2 Standard Electric Bass (with some extra text for a second line)
            </div>
            <div class="col col-2 align-middle text-center pr-3">$449.00</div>
          </div>
        </div>
      </li>

      <li style="justify-content: space-between; background-color: rgba(0,0,0,.05);">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 align-middle text-center">1</div>

            <div class="col col-7 align-middle text-wrap">
              Gibson J-45 Standard Acoustic-Electric Guitar (with some extra text for a second line)
            </div>
            <div class="col col-2 align-middle text-center pr-3">$2,999.00</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>

html css bootstrap-4 vertical-alignment
1个回答
0
投票

我的印象是，如果创建引导程序

row
，每个子元素都必须是指定宽度的
col
。但是，如果元素的宽度每次都完全相同，例如缩略图，则可以将 
col
排除在外，仅应用于文本元素。

    <head>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    </head>
    <body>

            <div class="cart-hover" tabindex="-1">
                <div class="cart-hover-header">
                    <b>Subtotal: $3,555.00</b>
                    <a class="btn btn-primary pagearea">View Cart</a>
                </div>
                                <ul class="list-unstyled ul-striped">
                    <li role="group" aria-label="product">
                            <div class="row m-0">
                                <div class="align-self-center ml-3">
                                    <div class="cart-item-img my-1">
                                            THUMBNAIL
                                        </div>
                                </div>
                                <div class="col-2 align-self-center text-center">
                                    2
                                </div>
                                <h2 class="col-11 h6 align-self-center font-weight-normal text-wrap m-0 pl-0">
                                    <a id="cart-item-334161" class="align-self-center text-reset pagearea">
                                        Paul Reed Extra Class Super Special Guitar That Spans Multiple Lines 1
                                    </a>
                                </h2>
                                <div class="col-6 align-self-center text-right">
                                    $679.00/ea
                                </div>
                            </div>
                        </li>
                    <li role="group" aria-label="product">
                            <div class="row m-0">
                                <div class="align-self-center ml-3">
                                    <div class="cart-item-img my-1">
                                            THUMBNAIL
                                        </div>
                                    </div>
                                <div class="col-2 align-self-center text-center">
                                    2
                                </div>
                                <h2 class="col-11 h6 align-self-center font-weight-normal text-wrap m-0 pl-0">
                                    <a id="cart-item-327889" class="align-self-center text-reset pagearea">
                                        Paul Reed Extra Class Super Special Guitar That Spans Multiple Lines 2
                                    </a>
                                </h2>
                                <div class="col-6 align-self-center text-right">
                                    $759.00/ea
                                </div>
                            </div>
                        </li>
                    <li role="group" aria-label="product">
                            <div class="row m-0">
                                <div class="align-self-center ml-3">
                                    <div class="cart-item-img my-1">
                                            THUMBNAIL
                                        </div>
                                </div>
                                <div class="col-2 align-self-center text-center">
                                    1
                                </div>
                                <h2 class="col-11 h6 align-self-center font-weight-normal text-wrap m-0 pl-0">
                                    <a id="cart-item-313124" class="align-self-center text-reset pagearea">
                                        Paul Reed Extra Class Super Special Guitar That Spans Multiple Lines 3
                                    </a>
                                </h2>
                                <div class="col-6 align-self-center text-right">
                                    $679.00
                                </div>
                            </div>
                        </li>
                    </ul>
            </div>

    </body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.