Question

我正在尝试使用Bootstrap 4构建两行，应该在具有viewport＆lt;的设备上显示一行。平板电脑和其他＆gt;片剂。换句话说，一旦一个是可见的，另一个是隐藏的。我正在使用Bootstrap 4中的本机d- - 类，但是在＆gt;中。平板电脑外壳他们以某种方式打破了列。我不确定，如果它是错误或只是我，但我坚持这几个小时。这是一个我用来表示问题的简单例子。

<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
	<section class="container-fluid">
		<div class="row d-none d-md-block">
			<div class="col-4">
				<p>Test paragraph - desktop</p>
			</div>
			<div class="col">
				<p>Test paragraph - desktop</p>
			</div>
		</div>
		<div class="row d-xs-block d-md-none">
			<div class="col-8">
				<p>Test paragraph - mobile</p>
			</div>
			<div class="col">
				<p>Test paragraph - mobile</p>
			</div>
		</div>
	</section>
</body>
</html>

Answer 1

你需要使用d-md-flex类，因为d-md-lock覆盖bootstrap 4的flex属性.....检查我已经添加了d-md-flex类

＆＃13;

<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
	<section class="container-fluid">
		<div class="row d-none d-md-flex">
			<div class="col-4">
				<p>Test paragraph - desktop</p>
			</div>
			<div class="col">
				<p>Test paragraph - desktop</p>
			</div>
		</div>
		<div class="row d-xs-block d-md-none">
			<div class="col-8">
				<p>Test paragraph - mobile</p>
			</div>
			<div class="col">
				<p>Test paragraph - mobile</p>
			</div>
		</div>
	</section>
</body>
</html>

＆＃13;

设置显示类后，Bootstrap 4网格系统中断

1 个答案: