如何缩小引导卡？(水平滚动条出现)

Question

我试图缩小这些引导卡一点，所以没有任何水平滚动条出现，我似乎不知道如何缩小它。我很感谢你的帮助。

水平滚动条出现是因为卡片太大了

HTML代码

<div class="card bg-dark text-light" id="card-1" style="width: 18rem;">
  <img class="card-img-top" src="static\random_pics\card_1.jpg" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">I have been learning how to program for the past 2 months now. It has been really fun so far
            and I do not plan on stopping anytime soon. I have learned Python, HTML, CSS and Javascript so far and I plan
            on learning more about different frameworks, such as Django and React JS.</p>
  </div>
</div>

<div class="card bg-dark text-light shadow-lg" id="card-2" style="width: 18rem;">
  <img class="card-img-top" src="static\random_pics\card_3.jpg" alt="Card image cap">
    <div class="card-body">
    <p class="card-text">My education hasn't always been my top priority and seeing everything going around in the world
                        It is crucial that I get a proper education, whether it be programming or anything that might
                        benefit me in the future, just because I took the time to learn it.</p>
    </div>
</div>

<div class="card bg-dark text-light shadow-lg" id="card-3" style="width: 18rem;">
  <img class="card-img-top" src="static\random_pics\card_2.png" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">I have a lot of hobbies, some of the things I love doing are playing video games, cooking and
            ofcourse, coding! I also love powerlifting, My max lifts (deadlift, squat, bench) totaled to 790 pounds.</p>
  </div>
</div>

<div class="card bg-dark text-light shadow-lg" id="card-4" style="width: 18rem;">
  <img class="card-img-top" src="static\random_pics\card_4.jpg" alt="Card image cap">
    <div class="card-body">
    <p class="card-text">My goals right now is to get better at programming. I find back-end development more fun but
    I also think front-end is decently entertaining for me. In the future, I see myself being a full stack
    web developer.</p>
    </div>
</div>

</div>

Answer 1

由于您正在使用引导，您可以使用他们已经强大的网格系统。了解更多关于引导网格(行和科尔) 这里的信息。

关于网格系统如何实现的一个示例：

<div class="row">
    <div class="col-md-4 card bg-dark text-light" id="card-1">
        <img class="card-img-top" src="https://i.guim.co.uk/img/media/7a633730f5f90db3c12f6efc954a2d5b475c3d4a/0_138_5544_3327/master/5544.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=27c09d27ccbd139fd0f7d1cef8f7d41d" alt="Cat">
        <div class="card-body">
            <p class="card-text">
                I have been learning how to program for the past 2 months now. It has been really fun so far
                and I do not plan on stopping anytime soon. I have learned Python, HTML, CSS and Javascript so far and I plan
                on learning more about different frameworks, such as Django and React JS.
            </p>
        </div>
    </div>
    <div class="col-md-4 card bg-dark text-light shadow-lg" id="card-2">
        <img class="card-img-top" src="https://i.guim.co.uk/img/media/7a633730f5f90db3c12f6efc954a2d5b475c3d4a/0_138_5544_3327/master/5544.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=27c09d27ccbd139fd0f7d1cef8f7d41d" alt="Cat">
        <div class="card-body">
             <p class="card-text">
                My education hasn't always been my top priority and seeing everything going around in the world
                It is crucial that I get a proper education, whether it be programming or anything that might
                benefit me in the future, just because I took the time to learn it.
            </p>
        </div>
    </div>
    <div class="col-md-4 card bg-dark text-light shadow-lg" id="card-3">
        <img class="card-img-top" src="https://i.guim.co.uk/img/media/7a633730f5f90db3c12f6efc954a2d5b475c3d4a/0_138_5544_3327/master/5544.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=27c09d27ccbd139fd0f7d1cef8f7d41d" alt="Cat">
        <div class="card-body">
            <p class="card-text">
                My goals right now is to get better at programming. I find back-end development more fun but
                I also think front-end is decently entertaining for me. In the future, I see myself being a full stack
                web developer.
            </p>
        </div>
    </div>
</div>

可选代码片段示例：

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-md-4 card bg-dark text-light" id="card-1">
		<img class="card-img-top" src="https://i.guim.co.uk/img/media/7a633730f5f90db3c12f6efc954a2d5b475c3d4a/0_138_5544_3327/master/5544.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=27c09d27ccbd139fd0f7d1cef8f7d41d" alt="Cat">
		<div class="card-body">
			<p class="card-text">
				I have been learning how to program for the past 2 months now. It has been really fun so far
				and I do not plan on stopping anytime soon. I have learned Python, HTML, CSS and Javascript so far and I plan
				on learning more about different frameworks, such as Django and React JS.
			</p>
		</div>
	</div>
	<div class="col-md-4 card bg-dark text-light shadow-lg" id="card-2">
		<img class="card-img-top" src="https://i.guim.co.uk/img/media/7a633730f5f90db3c12f6efc954a2d5b475c3d4a/0_138_5544_3327/master/5544.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=27c09d27ccbd139fd0f7d1cef8f7d41d" alt="Cat">
		<div class="card-body">
			 <p class="card-text">
				My education hasn't always been my top priority and seeing everything going around in the world
                It is crucial that I get a proper education, whether it be programming or anything that might
                benefit me in the future, just because I took the time to learn it.
			</p>
		</div>
	</div>
	<div class="col-md-4 card bg-dark text-light shadow-lg" id="card-3">
		<img class="card-img-top" src="https://i.guim.co.uk/img/media/7a633730f5f90db3c12f6efc954a2d5b475c3d4a/0_138_5544_3327/master/5544.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=27c09d27ccbd139fd0f7d1cef8f7d41d" alt="Cat">
		<div class="card-body">
			<p class="card-text">
				My goals right now is to get better at programming. I find back-end development more fun but
				I also think front-end is decently entertaining for me. In the future, I see myself being a full stack
				web developer.
			</p>
		</div>
	</div>
</div>

​

您可以通过点击桌面视图的“完整页面”在全屏上查看，否则您将看到响应性的布局。

代码笔示例这里。

还可以将溢出属性设置为通过CSS隐藏，例如：

body{
    overflow-x: hidden;
}