ブートストラップを使用した要素の配置

Question

ブートストラップを使用して要素をより正確に配置する方法は？例：私はクラス.bgを持つdivを持っています。div内には、ブートストラップを介して配置されたコンテンツがありますが、私は望むように要素を配置するためにオフセットクラスを使用していますが、デスクトップ/モバイルデザイン - それはまったくうまく見えないので、私の主な質問は、そのdivの中の要素を携帯電話のクラス.bgに合わせる方法です。

.bg { 
    background-color: rgba(15, 26, 47, 0.9); 
    max-width: 920px; 
    max-height: 420px; 
    margin: 100px auto; 
    z-index: 36; 
    position: relative; 
} // main div 

.goodsright, 
.goodsleft { 
font-size: 16px; 
letter-spacing: 0.02em; 
line-height: 1.25; 
text-align: left; 
margin-top: 40px; 
z-index:36; 
} // content inside it 
//bootstrap classes for elements inside .bg class 
<div class="col-sm-4 col-sm-offset-1 col-xs-offset-4 goodsleft"> 
<div class="col-sm-4 col-sm-offset-2 col-xs-offset-4 goodsright"> 

Answer 1

私は少しあなたのコードを見ました。モバイルでのご希望のビューを取得し、これを実装してみてください。

HTML：

<div class="container"> 
    <div class="bg"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 goodsleft"> 
      <h1>Content Title 1</h1> 
      <p> 
       Content 1 information here. 
      </p> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 goodsright"> 
      <h1>Content Title 2</h1> 
      <p> 
       Content 2 information here. 
      </p> 
     </div> 
    </div> 
</div> 

CSS：

.bg { 
    background-color: rgba(15, 26, 47, 0.9); 
    width: 100%; 
    z-index: 36; 
} 

.goodsright, .goodsleft { 
    background-color: rgba(15, 26, 47, 0.9); 
    padding: 40px; 
    font-size: 16px; 
    letter-spacing: 0.02em; 
    line-height: 1.25; 
    text-align: left; 
    margin-top: 40px; 
    z-index:36; 
} 

あなたは、あなたを確認してくださいCOL-XSのオフセットを使用しようとしている場合オフセットの上にある次のビューポートを0に設定すると、リセットが必要です。その例は次のとおりです。

<div class="container"> 
    <div class="bg"> 
     <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6 col-lg-6 goodsleft"> 
      <h1>Content Title 1</h1> 
      <p> 
       Content 1 information here. 
      </p> 
     </div> 
     <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6 col-lg-6 goodsright"> 
      <h1>Content Title 2</h1> 
      <p> 
       Content 2 information here. 
      </p> 
     </div> 
    </div> 
</div> 

希望これは役に立ちます！