Обоснуйте начало и конец содержимого в bootstrap 4 с помощью flex - PullRequest
Новая
       16

Обоснуйте начало и конец содержимого в bootstrap 4 с помощью flex

0 голосов
/ 18 марта 2020

У меня есть этот код для мобильного заголовка: 

<div class="header_mobile">
    <div class="container">
        <div class="row">
            <div class="header_mobile_box">
                <div class="header_mobile_logo_div d-flex align-items-center justify-content-start">
                    <a href="<?php echo $host; ?>" title="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="header_logo_to_link navbar-brand">
                        <img src="<?php echo $host; ?>/images/assets/logo_33.png" alt="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="img-responsive header_logo_image" />
                    </a>
                </div>
                <div class="header_mobile_icons_div d-flex align-items-center justify-content-end">
                    <a href="<?php echo $host; ?>/kedvenc-termekeim" title="Kedvenc termékeim" class="header_kedvencek_link"><i class="fa fa-heart fejlec_kedvenc_ikon" aria-hidden="true"></i></a>
                    <a href="<?php echo $host; ?>/kosar" title="Kosár" class="header_kosar_link">
                        <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
                        <span id="header_kosar_text" class="header_kosar_text"></span>
                    </a>
                </div>
            </div>  
        </div>
    </div>
</div>

Я дал divs flex display и justify-content-start и end, но он не работает, все div находятся на левой стороне и друг под другом.

Я также попытался: - передать .header_mobile_box div: d-flex и justify-content между ними, но все еще та же проблема.

Что я делаю неправильно

1 Ответ

0 голосов
/ 22 марта 2020

Вы можете оправдать содержание в вашем ряду. Поместите свои столбцы сразу после строки и избегайте лишних элементов (<div class="header_mobile_box">) между ними. Вы можете поместить его перед строкой, если вам это нужно для стилизации. Пожалуйста, обратитесь к горизонтальному выравниванию Bootstrap . 

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div class="header_mobile">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-4">
          Left side
        </div>
        <div class="col-4">
          Right side
        </div>
      </div>
    </div>
  </div>
</body>
...