ブートストラップコンテナでコンテンツを移動する適切な方法

コンテナを使用する場合。たとえばとし、相対的な位置を使用します。位置の相対的な関係は、左右に動かすことでコンテナを混乱させるでしょう。グリッドを指定してコンテンツを移動するときに、デバイスのレンダリングの問題はありませんか？＃/ 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; 
}

- COL-MDでのグリッドIセットアップをめちゃくちゃにせずにコンテンツを移動するための適切な方法だろう何

出典

2016-07-05 user6680

（テストしたが、あなたが始めるべきではない）、これを試してみてください。 – makshh

私は列をオフセットすることができますが、
を使用して1つのコンテナを別のコンテナにする必要がありますか？他のコンテナの下でコンテンツを移動する適切な方法は何ですか？参照のためのスクリーンショットを参照してください – 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'に配置すると、すべてがそのクラスの境界内に収まるように調整されます。デフォルトは固定幅です。 –

ありがとうRobert。それは私のためにすべてを明確にしました。私は今それを働かせた – user6680

ブートストラップコンテナでコンテンツを移動する適切な方法

答えて

関連する問題