在引导程序容器中移动内容的正确方法

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

来源

2016-07-05 user6680

显示你的代码，并解释不清楚你想要达到的目标。 – makshh

我知道我可以抵消列，但是我应该使用
将一个容器放在另一个容器下吗？在其他容器下移动内容的正确方式是什么？请参阅截图 – user6680

@ user6680请在您的文章中澄清如何移动内容。 – hungerstar

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

来源

2016-07-05 14:36:57

它如何在bootply中正确格式化，而不是在我的浏览器中。看到更新的截图和HTML以上。我用你的代码 – user6680

在上面的bootply中没有'.container'元素。一旦将提供的代码放入'.container'中，所有内容都将调整为适合该类的范围，默认情况下该范围具有固定的宽度。 –

谢谢罗伯特。这为我澄清了一切。我现在正在工作 – user6680

在引导程序容器中移动内容的正确方法

回答

相关问题