Question

如果我使用容器。例如然后我使用位置相对。位置相对将通过向左和向右移动来弄乱容器。当我指定网格然后移动内容时，这不会导致设备出现问题吗？什么是移动内容而不搞乱我用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>&nbsp;{{"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;
}

Answer 1

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

在bootstrap容器中移动内容的正确方法

1 个答案: