使用引導程序定位元素

Question

如何使用引導程序更精確地定位元素？例如：現在我有一個帶有class .bg的div，其中有通過bootstrap定位的div內容，但是當我使用offset類來定位像我想要的元素時，它只在桌面/平板電腦上看起來很好，但如果我們談論移動設計 - 它看起來不太好，所以我的主要問題是如何將我的元素在手機中的class .bg中放入該div中。一些代碼可能會幫助你：

.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> 

Hope這有助於！