Bootstrap卡片边框消失，网格无法使用。

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

我刚开始接触web开发一般，所以我可能会遗漏一些超级简单的东西。我正在尝试使用Bootstrap卡片，并且一直在用其中的三个卡片进行测试。我想让卡片在大屏幕上时适合3行，然后当页面尺寸减小时，变成2行，再变成单列。前面两张卡可以做到这一点，但最后一张卡即使在桌面上全屏时，也不能和前两张卡保持在同一行。

另外，第一张卡的卡片边框是正常的，但第二张卡没有。第三张卡不仅没有边框，而且卡的大小也不一样。

我的三张卡的代码几乎完全相同，只有卡体文字和图片来源有细微的差别。我也没有使用任何自定义的css，只使用了bootstrap的。

下面是我的代码，供参考。

<div id="posts">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/01_25_18.html">
                        <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/10_28_16.html">
                        <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
                        </div>
                        <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/10_28_16.html">
                        <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                        </div>
                        <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

这是它的显示方式

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

你有额外的 </div> 在第2和第3张牌上贴上标签。试试这个。

<div id="posts">
<div id="content" class="container">
    <div class="row">


        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Jan. 25, 2018</h5>
                    </div>
                </a>
        </div>

        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Oct. 28, 2016</h5>
                    </div>
                </a>
        </div>

        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Oct. 28, 2016</h5>
                    </div>
                </a>
        </div>
      </div>
   </div>
</div>
0
投票

解决办法？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div id="posts">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/01_25_18.html">
                        <img class="card-img-top" src="https://via.placeholder.com/300

C/O https://placeholder.com/" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                   <a href="pages/01_25_18.html">
                        <img class="card-img-top" src="https://via.placeholder.com/300

C/O https://placeholder.com/" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
           </div>
                </div>
            </div>
            <div class="row">
    <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                   <a href="pages/01_25_18.html">
                        <img class="card-img-top" src="https://via.placeholder.com/300

C/O https://placeholder.com/" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
           </div>
                </div>
</div>
            </div>
        </div>
        <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

我加行，改正你的代码。

0
投票

我觉得不对的地方 -

  1. 没有 col-lx-4. 应该是 col-xl-4
  2. 应该是 <div class="col-md-6 col-lg-4 col-sm-12"> 而不是 <div class="col-md-6 col-lg-4 col-lx-4"> 因为在大屏幕上，你希望一排有3个项目，在中屏幕上，你希望有2个项目，在小屏幕上，你希望有一个项目。
  3. 最后两张卡没有边框，因为在最后两张卡中，你有一个额外的边框。</div> 之后 img.

总的来说，你的模板应该像下面的样子。

<div id="posts">
  <div id="content" class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4 col-sm-12">
        <div class="card mt-4">
          <a href="pages/01_25_18.html">
            <img class="card-img-top" src="images/fulls/03.jpg" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Jan. 25, 2018</h5>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 col-sm-12">
        <div class="card mt-4">
          <a href="pages/10_28_16.html">
            <img class="card-img-top" src="images/fulls/04.jpg" alt="..." />

            <div class="card-body">
              <h5 class="card-title">Oct. 28, 2016</h5>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 col-sm-12">
        <div class="card mt-4">
          <a href="pages/10_28_16.html">
            <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
            </img>
            <div class="card-body">
              <h5 class="card-title">Oct. 28, 2016</h5>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
0
投票

Bootstrap网格的行数应该加到12。在小设备中，使用col-sm-12。

0
投票

从BS 4.4开始就可以使用了

https:/getbootstrap.comdocs4.4layoutgrid#row-columns。

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
  </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.