調整一個元素的位置而不影響其他人的CSS

我剛剛開始探索CSS，並期待深入瞭解該語言。調整一個元素的位置而不影響其他人的CSS

我在項目中遇到的問題之一是移動視圖中產品的對齊。

網站 - http://klcl.com.my/product-listing/

在移動視圖，產品觸摸屏幕的右側。我希望他們能夠被集中。我嘗試添加一個'margin-right：15px'並且它有效;但是，新的代碼行也會影響頁腳中的社交媒體圖標。我猜測，因爲產品列表和圖標都使用'.col-md-4'類標籤。

下面是代碼：

<div class="col-md-9 product-listing-main"> 
    <div class="row"> 
    <?php 
     $args = array(
     'posts_per_page' => -1, 
     'post_type' => 'product' 
     ); 
     $query = new WP_Query($args); 
     while ($query->have_posts()) : 
     $query->the_post(); 
     ?> 
     <div class="col-md-4"> 
      <figure> 
      <a href="<?php the_permalink(); ?>"><img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" /></a> 
      <figcation><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></figcation> 
      </figure> 
      </div> 
     <?php 
     endwhile; 
     wp_reset_postdata(); 
     ?> 
     </div> 
    </div>

我該如何調整產品到中間，而不會影響網站上的任何其他元素？任何幫助將不勝感激。

來源

2015-07-11 Edmund Chan

添加到您的CSS重置之前的設置：

.on-social{margin-right:initial !important;}

或

.on-social{margin-right:0px !important;}

請考慮margin: 0 auto;爲中心的元素。

來源

2015-07-11 13:48:24 Ormoz

謝謝！但它似乎並沒有工作。當我調整'.col-md-4'的邊距時，社交媒體按鈕仍在移動。 –

@EdmundChan我編輯了帖子 – Ormoz

在簡短的看一下你的代碼之後，我發現你經常操縱引導元素（容器，col- * ...）的填充並導致混淆。儘量避免這一點，一切運行良好。

來源

2015-07-11 14:53:15

調整一個元素的位置而不影響其他人的CSS

回答

相關問題