Header by React-Bootstarp

md 2: 10 でGridでlogo: textにしている

だがテキストの「お電話はこちら」が

縦方向center 横方向rightにならない

getbootstrap.com

jusify-content-end

だけでは右上になる

align-self-center

をつけても動かない

つまりd-flex- justify-contentで左右は調整できるが，上下がで来てない

align-items-center　も効果がない

medium.com

h-100をつけたらできた！！！！！

こちらが全体のコード

        <Col className='py-1 Pink ' 
          xs={8} md={10}>
          <h4 className='
              d-flex 
              justify-content-end 
              align-items-center
              h-100
          '>
            {headerText}</h4>
        </Col>

しかし背景色をつけてみると，高さが目一杯になっていた

実際の電話番号一覧のLINKを貼るのにはこのやり方ではでかすぎる．

header,

<img src={Logo}                              
  className=                                 
    'rounded mx-auto d-block img-fluid logo' 
  alt = 'logo'                               
  width='220px'                              

これで真ん中になった

Navbar

2020.06.13.

やはりHeader にnav入れる必要がある

SideMenuは削る

react-bootstrap.github.io

<Navbar bg="" className='m-0'>             
  <Navbar.Brand href="./" >                
    <img                                   
      src={logo}                           
      height="60"                          
      className="d-inline-block align-top" 
      alt="React Bootstrap logo"           
    />                                     
  </Navbar.Brand>                          
    LOGO                                   
</Navbar>                                  

textとずれてしまうので全てSVGにした．

heightは90.

だがスマフォで見るとnavがぐちゃぐちゃ

responsiveのが用意されている

<Navbar collapseOnSelect expand = 'lg'>         
  <Navbar.Brand href="./" >                     
    <img                                        
      src={logo}                                
      height="35"                               
      className="d-inline-block align-top my-2" 
      alt="React Bootstrap logo"                
    />                                          
  </Navbar.Brand>                               
                                                
  <Navbar.Toggle                                
    aria-controls="responsive-navbar-nav" />    
  <Navbar.Collapse id="responsive-navbar-nav">  
    <Nav className='mr-auto'>                   
      {navItems}                                
    </Nav>                                      
  </Navbar.Collapse>                            
</Navbar>     

でハンバーガーを用意してくれる

クリックで開く