如果我使用容器。例如 然后我使用相对位置。相对位置会通过左右移动弄乱容器。当我指定网格然后四处移动内容时，这不会导致设备呈现问题吗？ 在不弄乱我用 col-md-#/col-sm-# 设置的网格的情况下移动内容的正确方法是什么
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
</div>
</div>
</div><!--Header Container-->
</div>
<div class="bikeSelector">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6"><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
Test
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.products {
position :relative;
left: 500px;
}
最佳答案
对于您要实现的目标，您的 html 在某些地方是错误的。
试试这个(未经测试但应该让你开始)
<div class='row'>
<div class='col-md-offset-3 col-md-6'><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
<div class="products">
{{bike.name}}
</div>
</div>
</div><!--bike controller row-->
Here's a bootply which is a great way to test before you add
关于css - 在 Bootstrap 容器中移动内容的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38205871/