0
BootStrapグリッドシステムを使用しているので、私のdivは浮動小数点型ではありません。したがって、4列を使用した場合、2列目のdivは次の4列になりますが、行内にない同じ列になります。divが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>予想される出力：
あなたが役に立ったと思ったらマークして、他の人がそれに従うようにしてください –