html - 为什么 div 不使用 BootStrap 飘走？

Question

我的 div 没有像我使用的 BootStrap 网格系统那样向左浮动，所以如果我使用 4 个列，然后第二个 div 应该采用接下来的 4 个列，但它会在相同的列中下降，而不是在行中？

/*!
 * Venue Management System (Common CSS)
 * Author # Umair Shah Yousafzai
 * Author Email # nicefellow1234@gmail.com
 * Date # 14 Aug2017
 */

@font-face {
	font-family: MyriadPro-Regular;
	src: url(../fonts/MyriadPro-Regular.otf);
}
         
@font-face {
    font-family: Quicksand-Bold;
    src: url(../fonts/Quicksand-Bold.ttf);
}
         
@font-face {
    font-family: Quicksand-Light;
    src: url(../fonts/Quicksand-Light.ttf);
}
         
@font-face {
	font-family: Quicksand-Regular;
	src: url(../fonts/Quicksand-Regular.ttf);
}

body { 
	background-color: rgb(232,246,235);
	font-family: Quicksand-Light;
	letter-spacing: 2px;
}

ul li {list-style: none !important }
a { text-decoration: none !important }

.container {padding-top: 100px;}

.dashboard {
	border: 0.5px solid #cccccc;
	padding: 30px;
}

.dashboard-menu-item {
	padding: 60px 0px 60px 0px;
	color:white;
	text-align: center;
	font-weight: bold;
	font-size: 12px;	
}

.menu-icon {
	font-size: 20px !important;
}


.item-bg-dark {
	background-color: rgb(37,80,87);
}

.item-bg-light {
	background-color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
	  	
	  	
	  	<!-- Dashboard Horizontal Menu -->
		<div class="dashboard">
				<ul>
					<li>
						<a href="#">
								<div class="dashboard-menu-item item-bg-dark col-sm-3">
									<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
								</div>
						</a>
					</li>
					<li>
						<a href="#">
								<div class="dashboard-menu-item item-bg-dark col-sm-3">
									<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
								</div>
						</a>
					</li>
					<li>
						<a href="#">
								<div class="dashboard-menu-item item-bg-dark col-sm-3 col-sm-offset-4">
									<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
								</div>
						</a>
					</li>
				</ul>
		</div>

	  </div>

预期输出:

Answer 1

您忘记在提供的示例中将 row class 添加到父元素，并将 Bootstrap 网格类添加到下一个元素，即 li。请检查更新后的代码。

/*!
 * Venue Management System (Common CSS)
 * Author # Umair Shah Yousafzai
 * Author Email # nicefellow1234@gmail.com
 * Date # 14 Aug2017
 */

@font-face {
	font-family: MyriadPro-Regular;
	src: url(../fonts/MyriadPro-Regular.otf);
}
         
@font-face {
    font-family: Quicksand-Bold;
    src: url(../fonts/Quicksand-Bold.ttf);
}
         
@font-face {
    font-family: Quicksand-Light;
    src: url(../fonts/Quicksand-Light.ttf);
}
         
@font-face {
	font-family: Quicksand-Regular;
	src: url(../fonts/Quicksand-Regular.ttf);
}

body { 
	background-color: rgb(232,246,235);
	font-family: Quicksand-Light;
	letter-spacing: 2px;
}

ul li {list-style: none !important }
a { text-decoration: none !important }

.container {padding-top: 100px;}

.dashboard {
	border: 0.5px solid #cccccc;
	padding: 30px;
}

.dashboard-menu-item {
	padding: 60px 0px 60px 0px;
	color:white;
	text-align: center;
	font-weight: bold;
	font-size: 12px;	
}

.menu-icon {
	font-size: 20px !important;
}


.item-bg-dark {
	background-color: rgb(37,80,87);
}

.item-bg-light {
	background-color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
	  	
	  	
	  	<!-- Dashboard Horizontal Menu -->
		<div class="dashboard">
				<ul class="row">
					<li class=" col-sm-4">
						<a href="#">
								<div class="dashboard-menu-item item-bg-dark">
									<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
								</div>
						</a>
					</li>
					<li class=" col-sm-4">
						<a href="#">
								<div class="dashboard-menu-item item-bg-dark">
									<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
								</div>
						</a>
					</li>
					<li class=" col-sm-4">
						<a href="#">
								<div class="dashboard-menu-item item-bg-dark ">
									<i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
								</div>
						</a>
					</li>
				</ul>
		</div>

	  </div>