Bootstrap 4 卡水平滚动问题? [英] Bootstrap 4 card horizontal Scroll issue?

查看：30
本文介绍了Bootstrap 4 卡水平滚动问题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用引导卡在下面创建基本的图像和文本.决定使用卡类，因为它的结构非常好，不想使用太多的 css 来制作水平的 div 列表.我想要的是像这样水平滚动的图片库

问题是卡片行为会随着我添加更多卡片而变小.这里有什么问题?，也许我不应该使用卡组?.也许必须废弃引导程序并编写自己的程序?

.card-group {溢出-x:滚动；空白:nowrap；最大宽度:30rem；填充:1rem；}

<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文档</title><script src="https://code.jquery.com/jquery-3.3.1.js"integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTcrossorigin="匿名"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiWWPlvC"crossorigin="匿名"></script><script src="./index.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ER"crossorigin="匿名"><身体><div class="container mt-4"><div class="horzontal-scrollgallery"><div class="card-group"><div class="card pr-3"><img class="card-img-top" src="./images/chicago.jpg" alt="卡片图片"><div class="card-body text-center"><h4 class="card-title">John Doe</h4>

<div class="card pr-3"><img class="card-img-top" src="./images/chicago.jpg" alt="卡片图片"><div class="card-body text-center"><h4 class="card-title">John Doe</h4>

<div class="card pr-3"><img class="card-img-top" src="./images/chicago.jpg" alt="卡片图片"><div class="card-body text-center"><h4 class="card-title">John Doe</h4>

<div class="card pr-3"><img class="card-img-top" src="./images/chicago.jpg" alt="卡片图片"><div class="card-body text-center"><h4 class="card-title">John Doe</h4>

</html></html>

解决方案

你的卡片变小的原因是因为 .card-group 显示为 flex 和它的卡片项目的 flex-grow 设置为 1，这意味着它们将占据相同的宽度:

为了得到你想要的，你可以定义一个自定义类及其默认的.card-group(这样你就不会覆盖默认的卡片组样式)，设置它的溢出样式以及它的孩子 的 flex-basis 以便它们具有默认宽度.您需要将卡片组的包装样式设置为 no-wrap，并且默认设置为 wrap.

CSS

@media(最小宽度:576px){.card-group.card-group-scroll {溢出-x:自动；flex-wrap: nowrap;}.card-group.card-group-scroll >.卡片 {弹性基础:35%；}}

结果

小提琴: http://jsfiddle.net/b2jw13go/1/

i am using bootstrap card to create a basic image and text underneath.Decided to use card class since its a pretty good structure and didn't want to use too much css to make div list horizontally. what i want is like an image gallery with horizontal scroll like this

the problem is that card behavior is to get smaller as i add more cards . what is the issue here? , maybe i shouldn't use card-group?. maybe have to scrap bootstrap and write my own?

.card-group {
    overflow-x: scroll;
    white-space: nowrap;
    max-width: 30rem;
    padding: 1rem;
    }

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
	 crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
	 crossorigin="anonymous"></script>
	<script src="./index.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
	 crossorigin="anonymous">


</head>

<body>
	<div class="container mt-4">
		<div class="horzontal-scrollgallery">
			<div class="card-group">
				<div class="card pr-3">
					<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
					<div class="card-body text-center">
						<h4 class="card-title">John Doe</h4>
					</div>
				</div>
				<div class="card pr-3">
					<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
					<div class="card-body text-center">
						<h4 class="card-title">John Doe</h4>
					</div>
				</div>
				<div class="card pr-3">
					<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
					<div class="card-body text-center">
						<h4 class="card-title">John Doe</h4>
					</div>
				</div>
				<div class="card pr-3">
					<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
					<div class="card-body text-center">
						<h4 class="card-title">John Doe</h4>
					</div>
				</div>

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

</body>

</html>
</body>

</html>

解决方案

The reason why your cards are getting smaller is because .card-group is displayed as flex and its card items' flex-grow is set to 1, which means they will take up equal widths:

To get what you want, you can define a custom class along with its default .card-group (so that you don't override the default card-group styles), set its overflow style as well as its children <card>'s flex-basis so that they have a default width. You will need to set card-group's wrapping style to no-wrap as well as the default is set up wrap.

CSS

@media (min-width: 576px) {
    .card-group.card-group-scroll {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .card-group.card-group-scroll > .card {
        flex-basis: 35%;
    }
}

Result

fiddle: http://jsfiddle.net/b2jw13go/1/

这篇关于Bootstrap 4 卡水平滚动问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆