0
我試圖用我自己的風格& Bootstrap重新創建website。如何使用CSS/Bootstrap gridsystem水平排列兩個.rows？
我想不出如何水平對齊這兩個元素。
我想爲nav bar網格左邊是大小3和右邊的頁面的其餘部分爲9，和我有，但是當我去添加視頻，它只是垂直堆疊和不水平。
ul {
\t list-style: none;
}
.nav-left-bar {
\t text-transform: uppercase;
\t font-size: 9px;
\t font-family: Arial;
}
#search-but {
\t list-style: none;
\t border-bottom: 1px solid #000;
\t width: 18%;
\t padding-bottom: 1%;
\t margin: 5% 0 10% 0;
}
a:link, a:visited, a:active {
\t text-decoration: none;
\t color: #000;
}
a:hover {
}
#search-but:hover {
\t border-top: 1px solid #000;
\t border-left: 1px solid #000;
\t border-right: 1px solid #000;
\t padding-right: 50%;
}
video {
\t display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: right;
}
.vid-marg {
\t
}<!DOCTYPE html>
<html>
<head>
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <title>YSL</title>
\t <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
\t <link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
\t <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
\t <div class="container">
\t \t <div class="nav-left-bar">
\t \t \t <div class="row">
\t \t \t \t <div class="col col-md-3">
\t \t \t \t \t <img src="ysllogo.jpg">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li>winter 17 collection</li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li>la maison</li>
\t \t \t \t \t \t <li>saint laurent collections</li>
\t \t \t \t \t \t <li>saint laurent store locator</li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li>shop women</li>
\t \t \t \t \t \t <li>shop men</li>
\t \t \t \t \t \t <li>sunglasses collection</li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li id="search-but"><a href="#">search</a></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li id="bag-items">bag</li>
\t \t \t \t \t </ul>
\t \t \t \t \t <div class="bottom-navi-bar">
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li>log in/register</li>
\t \t \t \t \t \t \t <li>newsletter</li>
\t \t \t \t \t \t \t <li>customer care</li>
\t \t \t \t \t \t \t <li>shipping to: us</li>
\t \t \t \t \t \t \t <li>legal notices</li>
\t \t \t \t \t \t \t <li>follow us</li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col col-md-9">
\t \t \t \t \t <video src="https://md.yoox.biz/618203721001/201707/263/618203721001_5506271544001_5506259873001.mp4" autoplay=""></video>
\t \t \t </div>
\t \t </div>
\t </div>
\t
\t <script
\t src="http://code.jquery.com/jquery-3.2.1.js"
\t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
\t crossorigin="anonymous"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
神聖的廢話它真的很有用，哇，非常感謝你。這樣一個明顯的答案，我沒有嘗試它..非常感謝你！ – 600Jasper