画面サイズが小さくなると、ボタンのフォーマットが混乱します

Question

以下にスニペットを含めました。スニペットをフルスクリーンで実行すると、必要な効果が表示されます（左のボタン1と2、右のボタン3と4）。しかし、ウィンドウを小さくすると、ボタン1と2が右に移動し、ボタン3と4が左に移動します。

私はこれをメディアクエリで修正することができましたが、これを修正するために何ができるのかわかりません。

#lower-bar { 
 
    background-color: #0F6292; 
 
    height: 80px; 
 
    position: relative; 
 
} 
 
.center-left { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translate(40%, 70%); 
 
} 
 
.center-center { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translate(25%, 70%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<section id='lower-bar'> 
 
    <div class='row'> 
 

 
    <div class='col-md-6'> 
 
     <div class='center-left'> 
 
     <input type="button" id='btn-1' class=" btn c-btn-quiz" value="1"> 
 
     <input type="button" id='btn-2' class=" btn c-btn-quiz" value="2"> 
 
     </div> 
 
    </div> 
 

 
    <div class='col-md-6'> 
 
     <div class='center-center'> 
 
     <input type="button" id='3' class="btn c-btn-quiz" value="3"> 
 
     <input type="button" id="4" class="btn c-btn-quiz" value="4"> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</section>

Answer 1

あなたが大幅にpull-rightを使用してこれをsimplfyができ、pull-leftがこれですようにそれはそうなので多分これが役立ちます

#lower-bar { 
    background-color: #0F6292; 
    width:100%; 
    height: 80px; 
    position: relative; 
} 
.center-left { 
    width:50%; 
    height:auto; 
    float:left; 
    margin-top:30px; 
} 

.center-center { 
    width:50%; 
    height:auto; 
    float:left; 
    margin-top:30px; 
} 

Answer 2

が残っている、これはあなたのコードに変更しますビューポート全体で同じです。私は最善の解決策は、フレックスボックスを使用するようになると思いQuick Floats

#lower-bar { 
 
    background-color: #0F6292; 
 
    padding: 10px 0; 
 
    position: relative; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section id="lower-bar"> 
 
    <div class="container"> 
 

 
    <div class="pull-left"> 
 
     <input type="button" id="btn-1" class="btn c-btn-quiz" value="1"> 
 
     <input type="button" id="btn-2" class="btn c-btn-quiz" value="2"> 
 
    </div> 
 

 
    <div class="pull-right"> 
 
     <input type="button" id="3" class="btn c-btn-quiz" value="3"> 
 
     <input type="button" id="4" class="btn c-btn-quiz" value="4"> 
 
    </div> 
 

 
    </div> 
 
</section>

Answer 3

を参照してください。ここで

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
<link rel="stylesheet" href="style.css" /> 
<section id='lower-bar'> 
<div class='row'> 
     <div class='center-left'> 
      <input type="button" id='btn-1' class=" btn c-btn-quiz" value="1"> 
      <input type="button" id='btn-2' class=" btn c-btn-quiz" value="2"> 
     </div> 

     <div class='center-center'> 
      <input type="button" id='3' class="btn c-btn-quiz" value="3"> 
      <input type="button" id="4" class="btn c-btn-quiz" value="4"> 
     </div> 
</div> 

CSS

#lower-bar { 
    background-color: #0F6292; 
    display: flex; 
    } 
    .row { 
     display: flex; 
     align-items: center; 
     width: 100%; 
    } 
    .center-left { 
    display: flex; 
    margin-left: 25%; 
    } 

    .center-left input { 
     margin-left: 2px; 
     margin-right: 2px; 
    } 

    .center-center { 
     display: flex; 
     margin-left: auto; 
     margin-right: 25%; 
    } 

    .center-center input { 
     margin-left: 2px; 
     margin-right: 2px; 
    } 

ある