56431


はじめまして。menu-image要素とmenu-
text要素を横並びにしたいのですが、できずに困っています。初歩的な質問だとは思いますが、自身で解決できずに困っています。宜しくお願い致します。

[code]

    .tab-pane {
      display: flex;
    }
    
    .menu-tab {
      display: flex;
      width: 50%;
      background-color: red;
    }
    
    .menu-image {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: blue;
    }
    
    .menu-image img {
      border-radius: 20px;
    }
    
    .name {
      width: 50%;
    }
    
    .price {
      width: 50%;
    }
[/code]

[code]

    <div class="container">
      <div class="row">
        <div class="col-12">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#set-menu" class="nav-link active" data-toggle="tab">定食・鍋</a></li>
            <li class="nav-item"><a href="#baked-menu" class="nav-link" data-toggle="tab">焼き物</a></li>
          </ul>
        </div>
      </div>
    
      <div class="tab-content">
        <div class="tab-pane active" id="set-menu">
          <div class="menu-image">
            <img src="img/menu-img.jpg">
          </div>
    
          <div class="menu-text">
            <div class="menu-tab">
              <p class="name">A定食</p>
              <p class="price">1350円</p>
            </div>
            <div class="menu-tab">
              <p class="name">B定食</p>
              <p class="price">1350円</p>
            </div>
            <div class="menu-tab">
              <p class="name">C定食</p>
              <p class="price">930円</p>
            </div>
            <div class="menu-tab">
              <p class="name">D鍋</p>
              <p class="price">1050円</p>
            </div>
          </div>
        </div>
    
        <div class=" tab-pane" id="baked-menu">
          <div class="menu-image">
            <img src="img/menu-img.jpg">
          </div>
    
          <div class="menu-text">
            <div class="menu-tab">
              <p class="name">D</p>
              <p class="price">650円</p>
            </div>
            <div class="menu-tab">
              <p class="name">E</p>
              <p class="price">950円</p>
            </div>
            <div class="menu-tab">
              <p class="name">F</p>
              <p class="price">650円</p>
            </div>
            <div class="menu-tab">
              <p class="name">G</p>
              <p class="price">1350円</p>
              <div class="menu-tab">
                <p class="name">H</p>
                <p class="price">1450円</p>
              </div>
              <div class="menu-tab">
                <p class="name">I</p>
                <p class="price">350円</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2019-07-05T16:24:41.773
56429
2019-12-15T06:27:28.037
2019-12-15T06:27:28.037
32986
34997
question
css twitter-bootstrap
bootstrapのタブ内で要素を横並びに出来ない


Bootstrap により、`.tab-pane` に設定したスタイルが上書きされているためです。

`.tab-pane` には、現在アクティブなタブを表示させ、それ以外を非表示にするために、`display: block`, `display:
none` のどちらかが適用されています。そのため、`.tab-pane` の `display` プロパティを常に flex
に設定すると、前述したタブとしての機能が失われてしまいます。

そこで、`.tab-pane` に `.active` クラスが付与されたときのみ `display`
プロパティを上書きします。こうすることで、タブとしての機能は維持されます。

[code]

    .tab-content>.tab-pane.active { /* 変更 */
      display: flex;
    }
    
    .menu-tab {
      display: flex;
      width: 50%;
      background-color: red;
    }
    
    .menu-image {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: blue;
    }
    
    .menu-image img {
      border-radius: 20px;
    }
    
    .name {
      width: 50%;
    }
    
    .price {
      width: 50%;
    }
[/code]

[code]

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#set-menu" class="nav-link active" data-toggle="tab">定食・鍋</a></li>
            <li class="nav-item"><a href="#baked-menu" class="nav-link" data-toggle="tab">焼き物</a></li>
          </ul>
        </div>
      </div>
    
      <div class="tab-content">
        <div class="tab-pane active" id="set-menu">
          <div class="menu-image">
            <img src="img/menu-img.jpg">
          </div>
    
          <div class="menu-text">
            <div class="menu-tab">
              <p class="name">A定食</p>
              <p class="price">1350円</p>
            </div>
            <div class="menu-tab">
              <p class="name">B定食</p>
              <p class="price">1350円</p>
            </div>
            <div class="menu-tab">
              <p class="name">C定食</p>
              <p class="price">930円</p>
            </div>
            <div class="menu-tab">
              <p class="name">D鍋</p>
              <p class="price">1050円</p>
            </div>
          </div>
        </div>
    
        <div class=" tab-pane" id="baked-menu">
          <div class="menu-image">
            <img src="img/menu-img.jpg">
          </div>
    
          <div class="menu-text">
            <div class="menu-tab">
              <p class="name">D</p>
              <p class="price">650円</p>
            </div>
            <div class="menu-tab">
              <p class="name">E</p>
              <p class="price">950円</p>
            </div>
            <div class="menu-tab">
              <p class="name">F</p>
              <p class="price">650円</p>
            </div>
            <div class="menu-tab">
              <p class="name">G</p>
              <p class="price">1350円</p>
              <div class="menu-tab">
                <p class="name">H</p>
                <p class="price">1450円</p>
              </div>
              <div class="menu-tab">
                <p class="name">I</p>
                <p class="price">350円</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
[/code]

もしくは、`.tab-pane` の子要素に `display: flex` を適用した `div` 要素を作り、その中に`.menu-image` と
`.menu-text` を入れることでも解決出来ます。このようにすることでも、タブとしての機能が失われることなく、スタイルを適用することが出来ます。

[code]

    .tab-pane-content { /* 変更 */
      display: flex;
    }
    
    .menu-tab {
      display: flex;
      width: 50%;
      background-color: red;
    }
    
    .menu-image {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: blue;
    }
    
    .menu-image img {
      border-radius: 20px;
    }
    
    .name {
      width: 50%;
    }
    
    .price {
      width: 50%;
    }
[/code]

[code]

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#set-menu" class="nav-link active" data-toggle="tab">定食・鍋</a></li>
            <li class="nav-item"><a href="#baked-menu" class="nav-link" data-toggle="tab">焼き物</a></li>
          </ul>
        </div>
      </div>
    
      <div class="tab-content">
        <div class="tab-pane active" id="set-menu">
          <div class="tab-pane-content">
            <div class="menu-image">
              <img src="img/menu-img.jpg">
            </div>
    
            <div class="menu-text">
              <div class="menu-tab">
                <p class="name">A定食</p>
                <p class="price">1350円</p>
              </div>
              <div class="menu-tab">
                <p class="name">B定食</p>
                <p class="price">1350円</p>
              </div>
              <div class="menu-tab">
                <p class="name">C定食</p>
                <p class="price">930円</p>
              </div>
              <div class="menu-tab">
                <p class="name">D鍋</p>
                <p class="price">1050円</p>
              </div>
            </div>
          </div>
        </div>
    
        <div class=" tab-pane" id="baked-menu">
          <div class="tab-pane-content">
    
            <div class="menu-image">
              <img src="img/menu-img.jpg">
            </div>
    
            <div class="menu-text">
              <div class="menu-tab">
                <p class="name">D</p>
                <p class="price">650円</p>
              </div>
              <div class="menu-tab">
                <p class="name">E</p>
                <p class="price">950円</p>
              </div>
              <div class="menu-tab">
                <p class="name">F</p>
                <p class="price">650円</p>
              </div>
              <div class="menu-tab">
                <p class="name">G</p>
                <p class="price">1350円</p>
                <div class="menu-tab">
                  <p class="name">H</p>
                  <p class="price">1450円</p>
                </div>
                <div class="menu-tab">
                  <p class="name">I</p>
                  <p class="price">350円</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2019-07-05T18:54:01.843
56431
2019-07-05T18:54:01.843
32986
56429
answer