ブートストラップ・インラインが正しくスタックされていない

Question

他のブートストラップ・ポストを見てきましたが、私のコードが機能しない理由が分かりません。ここに私がいるところがある。私が数日間このことに取り組んでいるので、どんな助けも大歓迎です...

私はグリッドを使用しているだけではスタックできませんか？

<!-- Your site title as branding in the menu --> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <?php if (! has_custom_logo()) { ?> 

        <?php if (is_front_page() && is_home()) : ?> 

         <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a></h1> 

        <?php else : ?> 

         <a class="navbar-brand" rel="home" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a> 

        <?php endif; ?> 


       <?php } else { 
        the_custom_logo(); 
       } ?> 
      </div> 
     </div> 

<!-- end custom logo --> 
     <div class="row"> 
      <div class="col-md-6"> 
      <p class="text-right">Call Now</br> 
      <a href="tel:636-244-4444">636-244-4444</a></p> 
     </div> 
    </div> 
</div> 

Answer 1

あなたは、サイトのロゴを配置し、相互にインラインそれを作るために今1つの.row要素内のセクションを呼び出す必要があります。 2つのセクションが2つ異なる場合.row、同じ行にすることはできません。 （ブートストラップ3ドキュメントがより良いあなたの問題を説明しているので）

は、ここでは、ブートストラップグリッドについての詳細を参照してください：https://getbootstrap.com/docs/3.3/css/#grid

<div class="row"> 
    <div class="col-md-6"> 
      <?php if (! has_custom_logo()) { ?> 

       <?php if (is_front_page() && is_home()) : ?> 

        <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a></h1> 

       <?php else : ?> 

        <a class="navbar-brand" rel="home" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a> 

       <?php endif; ?> 


      <?php } else { 
       the_custom_logo(); 
      } ?> 
    </div> 

    <!-- end custom logo --> 
    <div class="col-md-6"> 
     <p class="text-right">Call Now</br> 
     <a href="tel:636-244-4444">636-244-4444</a></p> 
    </div> 
</div> <!-- end row (one line) here -->