Bootstrap 3 düğme sınırları örtüşen

Question

Aşağıdaki HTML vardır:

<div class="container"> 
    ... 
    <div class="row"> 
     <div class="col-lg-4"> 
      ... 
     </div> 
     <div class="col-lg-8"> 
      ... 
      <div class="btn-group" role="group"> 
       <button type="button" class="read-more" data-goto="more">READ MORE</button> 
       <button type="button" class="read-more" data-goto="quote">FREE QUOTE</button> 
      </div> 
     </div> 
    </div> 
    ... 
</div> 

Bu tam ekranda görünür:

Bu zaman böyle görünüyor resized:

Sorunum, küçük kenarlık çakışmasıdır, ÜCRETSİZ QUOTE düğmesinin hemen üstünde veya hemen DAHA FAZLA OKU düğmesinin altında bir miktar kenar boşluğu olabileceği bir yol var mı? Bu düğmelere css margin-top veya margin-bottom eklemek istemiyorum, çünkü tam ekrana bakma şeklini etkileyecektir. Belki de eksik olduğum bir hile vardır.

teşekkürler çocuklar.

Answer 1

@media only screen and (max-width: 600px) { 
 
    body { 
 
     background-color: blue !important; 
 
    } 
 
    
 
    .read-more{ 
 
    margin-bottom:3px; 
 
    margin-right: 3px; 
 
    } 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    ... 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-lg-4"> 
 
      ... 
 
     </div> 
 
     <div class="col-xs-8 col-lg-8"> 
 
      ... 
 
      <div class="btn-group" role="group"> 
 
       <button type="button" class="btn btn-default btn-md read-more" data-goto="more">READ MORE</button> 
 
       <button type="button" class="btn btn-default btn-md read-more" data-goto="quote">FREE QUOTE</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    ... 
 
</div>

çalıştırın & çalışma Aşağıdaki kod parçacığı% 100 test etti.

Yardım edin.