为什么divs不会使用BootStrap而浮动？
问题描述：
因为我使用BootStrap网格系统，所以如果我使用了4个cols，然后第二个div应该接下来的4个cols，但是它会在同一cols中不在行中，所以我的div不会左移。为什么divs不会使用BootStrap而浮动？
/*!
* Venue Management System (Common CSS)
* Author # Umair Shah Yousafzai
* Author Email # [email protected]
* Date # 14 Aug2017
*/
@font-face {
\t font-family: MyriadPro-Regular;
\t 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 {
\t font-family: Quicksand-Regular;
\t src: url(../fonts/Quicksand-Regular.ttf);
}
body {
\t background-color: rgb(232,246,235);
\t font-family: Quicksand-Light;
\t letter-spacing: 2px;
}
ul li {list-style: none !important }
a { text-decoration: none !important }
.container {padding-top: 100px;}
.dashboard {
\t border: 0.5px solid #cccccc;
\t padding: 30px;
}
.dashboard-menu-item {
\t padding: 60px 0px 60px 0px;
\t color:white;
\t text-align: center;
\t font-weight: bold;
\t font-size: 12px; \t
}
.menu-icon {
\t font-size: 20px !important;
}
.item-bg-dark {
\t background-color: rgb(37,80,87);
}
.item-bg-light {
\t 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">
\t \t
\t \t
\t \t <!-- Dashboard Horizontal Menu -->
\t \t <div class="dashboard">
\t \t \t \t <ul>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t <div class="dashboard-menu-item item-bg-dark col-sm-3">
\t \t \t \t \t \t \t \t \t <i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t <div class="dashboard-menu-item item-bg-dark col-sm-3">
\t \t \t \t \t \t \t \t \t <i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t <div class="dashboard-menu-item item-bg-dark col-sm-3 col-sm-offset-4">
\t \t \t \t \t \t \t \t \t <i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </a>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t </div>
\t </div>预期输出：
答
你忘了所提供的示例中添加row class父元素，也把引导网格类下一个元素，即li。请检查更新的代码。
/*!
* Venue Management System (Common CSS)
* Author # Umair Shah Yousafzai
* Author Email # [email protected]
* Date # 14 Aug2017
*/
@font-face {
\t font-family: MyriadPro-Regular;
\t 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 {
\t font-family: Quicksand-Regular;
\t src: url(../fonts/Quicksand-Regular.ttf);
}
body {
\t background-color: rgb(232,246,235);
\t font-family: Quicksand-Light;
\t letter-spacing: 2px;
}
ul li {list-style: none !important }
a { text-decoration: none !important }
.container {padding-top: 100px;}
.dashboard {
\t border: 0.5px solid #cccccc;
\t padding: 30px;
}
.dashboard-menu-item {
\t padding: 60px 0px 60px 0px;
\t color:white;
\t text-align: center;
\t font-weight: bold;
\t font-size: 12px; \t
}
.menu-icon {
\t font-size: 20px !important;
}
.item-bg-dark {
\t background-color: rgb(37,80,87);
}
.item-bg-light {
\t 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">
\t \t
\t \t
\t \t <!-- Dashboard Horizontal Menu -->
\t \t <div class="dashboard">
\t \t \t \t <ul class="row">
\t \t \t \t \t <li class=" col-sm-4">
\t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t <div class="dashboard-menu-item item-bg-dark">
\t \t \t \t \t \t \t \t \t <i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </a>
\t \t \t \t \t </li>
\t \t \t \t \t <li class=" col-sm-4">
\t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t <div class="dashboard-menu-item item-bg-dark">
\t \t \t \t \t \t \t \t \t <i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </a>
\t \t \t \t \t </li>
\t \t \t \t \t <li class=" col-sm-4">
\t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t <div class="dashboard-menu-item item-bg-dark ">
\t \t \t \t \t \t \t \t \t <i class="fa fa-sliders menu-icon" aria-hidden="true"></i> YOUR DASHBOARD
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </a>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t </div>
\t </div>
答
试试下面的标记为您的UL /李：
<ul class="row">
<li class="col-4"> </li>
<li class="col-4"> </li>
</ul>
改变 “COL-4” 到你需要的任何引导山坳级（ES）。
请标记您是否觉得有帮助，因此其他人可以关注它 –