ブートストラップ3ボタングループを反応させるにはどうすればよいですか？

Question

自分の携帯電話でページをブラウズするときに、ボタンを重ねて表示しようとしています。私はそれらを1行に出すようにしておきますが、その中のテキストは非常に長く、ページを縮小するとうまく表示されません。

ここに私のコードです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="btn-group btn-group-justified btn-group-lg btn-group-vertical"> 
 
    <a href="#" class="btn btn-primary"><font size="6">الدروس و التجارب</font></a> 
 
    <a href="#" class="btn btn-primary"><font size="6">المنشورات و الكتب الشخصية</font></a> 
 
    <a href="#" class="btn btn-primary"><font size="6">المدونة</font></a> 
 
    </div> 
 
</div>

Answer 1

私の知る限り、これを行うためのブートストラップに組み込まれては何もありません。ただし、ブートストラップの上にカスタムCSSを使用して行うこともできます。明示的にボタンを小さな画面に積み重ねることができます。

このため、私はブートストラップがデスクトップより小さいものに使用するブレークポイントを使用しました。これは簡単に変更できます。メディアクエリについて詳しく知りたい場合は、this MDN articleをお勧めします（幅についてはリンクが一部になりますが、すべての記事が面白いです）。

@media (max-width: 991px) { 
 
    .btn-group.my-btn-group-responsive > .btn { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
    
 
    /* making the border-radius correct */ 
 
    .btn-group.my-btn-group-responsive > .btn:first-child { 
 
    border-radius: 6px 6px 0 0; 
 
    } 
 
    .btn-group.my-btn-group-responsive > .btn:first-child:not(:last-child):not(.dropdown-toggle) { 
 
    border-top-right-radius: 6px; 
 
    } 
 
    .btn-group.my-btn-group-responsive > .btn:last-child:not(:first-child) { 
 
    border-radius: 0 0 6px 6px; 
 
    } 
 
    
 
    /* fixing margin */ 
 
    .btn-group.my-btn-group-responsive .btn + .btn { 
 
    margin-left: 0; 
 
    } 
 
    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="btn-group btn-group-justified btn-group-lg my-btn-group-responsive"> 
 
    <a href="#" class="btn btn-primary"><font size="6">الدروس و التجارب</font></a> 
 
    <a href="#" class="btn btn-primary"><font size="6">المنشورات و الكتب الشخصية</font></a> 
 
    <a href="#" class="btn btn-primary"><font size="6">المدونة</font></a> 
 
    </div> 
 
</div>

Answer 2

私はあなたの質問の権利を得た場合は、すべての行のボタンのいずれかをしたいです。ブートストラップでは、次のようにして行を開いてボタンを挿入することができます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="btn-group btn-group-justified btn-group-lg btn-group-vertical"> 
 
    <div class="row"> 
 
     <a href="#" class="btn btn-primary"> 
 
     <font size="6">الدروس و التجارب</font> 
 
     </a> 
 
    </div> 
 
    <div class="row"> 
 
     <a href="#" class="btn btn-primary"> 
 
     <font size="6">المنشورات و الكتب الشخصية</font> 
 
     </a> 
 
    </div> 
 
    <div class="row"> 
 
     <a href="#" class="btn btn-primary"> 
 
     <font size="6">المدونة</font> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 
</div>

また、あなたがボタンにCOLクラスを追加し、そのようなすべてのボタンのカラムの寸法を選択することができます。

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
     <button>[...]</button> 
     <button>[...]</button> 
    </div> 
</div>