シンプルなタブメニューを作成する方法

Question

多くのテキストがある場合、マイタブはうまく機能します。

しかし、テキストを縮小するとすぐにタブのサイズが小さくなります。どのような設定がこれを引き起こしている可能性がありますか？

私はそれがブートストラップだけでうまくいくことを知っています。私は自分のタブを台無しにしている設定があると思う。カスタムCSSで何を探しているはずですか？これは私のCSSです：https://ufile.io/ve4xc

HTML：

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

 
<div role="tabpanel"> 
 
         <div class="col-sm-3"> 
 
          <ul class="nav nav-pills brand-pills nav-stacked" role="tablist"> 
 
           <li role="presentation" class="brand-nav active"><a href="#app" aria-controls="app" role="tab" data-toggle="tab">Application</a></li> 
 
           <li role="presentation" class="brand-nav"><a href="#gitlab" aria-controls="gitlab" role="tab" data-toggle="tab">GitLab</a></li> 
 
           <li role="presentation" class="brand-nav"><a href="#docker" aria-controls="docker" role="tab" data-toggle="tab">Docker</a></li> 
 
          </ul> 
 
         </div> 
 
         <div class="col-sm-9"> 
 
          <div class="tab-content"> 
 
           <div role="tabpanel" class="tab-pane active" id="app"> 
 
            <p> 
 
             Lo 
 
            </p> 
 
           </div> 
 
           <div role="tabpanel" class="tab-pane" id="gitlab"> 
 
           
 
           </div> 
 
           <div role="tabpanel" class="tab-pane" id="docker"> 
 
            <p> 
 
             Lorem ipsizzle dolor away amizzle, consectetuer pizzle elizzle. Nullizzle yo velizzle, check it out volutpizzle, quis, gravida vel, yo. 
 
             Ma nizzle eget tortor. Sizzle eros. My shizz izzle dolizzle gizzle turpis tempizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. 
 
             Maurizzle pellentesque nibh izzle own yo'. Check it out in tortor. Pellentesque fizzle rhoncizzle nisi. 
 
            </p> 
 
            <p> 
 
             In hac habitasse platea dictumst. Shizzlin dizzle dapibus. You son of a bizzle tellizzle urna, pretizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle, 
 
             ghetto ac, check it out vitae, nunc. Shizzlin dizzle suscipizzle. Integizzle sempizzle velit sizzle dizzle. 
 
            </p> 
 
           </div> 
 
           <div role="tabpanel" class="tab-pane" id="tab4"> 
 
            <p> 
 
             Collaboratively administrate empowered markets via plug-and-play networks. 
 
             Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without 
 
             revolutionary ROI. 
 
            </p> 
 
            <p> 
 
             Efficiently unleash cross-media information without cross-media value. 
 
             Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar 
 
             solutions without functional solutions. 
 
            </p> 
 
            <p> 
 
             Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate 
 
             one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service 
 
             for state of the art customer service. 
 
            </p> 
 
           </div> 
 
          </div>

Answer 1

まあ、私の推測では、あなたが最初にクラス "行" を設定する必要があるということですdiv：

<div role="tabpanel" class="row"> 
         <div class="col-sm-3"> 
         ... 

これを試してください。ブートストラップ・グリッドのドキュメントをチェックして、正しいものにすることをお勧めします。