如何缩小引导卡？ （出现水平滚动条）

Question

我正在尝试将这些引导卡缩小一点，因此没有任何水平滚动条出现，我似乎不知道如何缩小它。我将不胜感激。

Horizontal Scroll Bar Shows Up because cards too big

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

由于您使用的是 Bootstrap，您可以利用他们已经强大的 Grid 系统。阅读有关 Bootstrap Grid（行和列）here 的更多信息。

网格系统的示例：

<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>

您可以通过单击桌面视图的“全页”以全屏方式查看它，否则您将看到响应式布局。

代码笔示例here.

你也可以通过CSS设置overflow属性为隐藏，例如：

body{
    overflow-x: hidden;
}