为什么div不会使用BootStrap浮动？

Question

我的div不会像我应该使用BootStrap网格系统那样漂浮，所以如果我使用了4个cols然后第二个div应该接下来的4个cols但是它会在相同的cols中下降不在排？

＆＃13;

＆＃13;

/*!
 * 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预期输出：

Answer 1

您忘记在提供的示例中将row class添加到父元素，并将引导网格类添加到下一个元素，即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>

Answer 2

为ul / li尝试以下标记：

<ul class="row">
  <li class="col-4">  </li>
  <li class="col-4">  </li>
</ul>

将“col-4”更改为您需要的任何bootstrap col-class。