bootstrap - изображение не выровнено по верху

Question

Я использую систему сетки, чтобы сделать мои изображения более элегантными. Я хочу, чтобы они выравнивались сверху, и в каждом ряду должно быть только 4 элемента, а затем он переходит к следующему ряду. Мой текущий выравнивание выглядит следующим образом:

Я хочу изображение рядом с каждым другой и положение слева вверху. Это мой код:

<!-- Product cards -->
<div class="row">        
  <div class="col col-md-2 ">
    <div class="dropdown">
      <button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown">
        <img src="{{asset('images/bedsheet.jpg')}}" style=" border-radius: 50%;  height: 150px;  width: 200px;">
      </button>
      <hr>
      <span class="text-capitalize"><strong>Bed Sheet</strong></span>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
      </ul>
    </div>    

    <div class="dropdown">
      <button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown">
        <img src="{{asset('images/curtain.jpg')}}" style=" border-radius: 50%;  height: 150px; width: 200px;">
      </button>
      <hr>
      <span class="text-capitalize"> <strong>Curtain</strong> </span>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
      </ul>
    </div> 
  </div>
</div>

Что я делаю не так?

Answer 1

Вы хотите выровнять раскрывающиеся списки рядом друг с другом? Тогда требуемый css равен display: flex; flex-direction: row;. Вы можете получить его, используя класс d-flex для контейнера dropdown.

Редактировать: Если вы хотите 4 элемента подряд пожалуйста, используйте col-3 класс для того же

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">        
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px; ">    
        </button><hr>
        <span class="text-capitalize"><strong>Bed Sheet</strong></span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div>  
    </div>  
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
    <div class="col-3">
      <div class="dropdown">
        <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
          <img src="https://cdn0.iconfinder.com/data/icons/avatar-vol-2-4/512/8-512.png" style=" border-radius: 50%;  height: 150px;">    
        </button><hr>
        <span class="text-capitalize"> <strong>Curtain</strong> </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
        </ul>
      </div> 
    </div>
  </div>
</div>

Answer 2

Вы объявили только один столбец, у вас должен быть div class="col" для каждого изображения:

<!-- Product cards -->
<div class="row">        
  <div class="col col-md-2 ">
    <div class="dropdown">
      ...
    </div>    
  </div>    

  <div class="col col-md-2 ">
    <div class="dropdown">
      ...
    </div> 
  </div>
</div>

Answer 3

Вы можете использовать 'col-sm-3' для выравнивания 4 элементов в одной строке, поскольку в bootstrap каждая строка содержит 12 виртуальных столбцов, поэтому разделите ее на 4 части по 3 столбца в каждой:

<body>
    <div class="container-fluid">      
    <!--The .container-fluid class provides a full-width container which spans the entire width of the viewport.-->
        <div class="row">
            <div class="col">          <!--remove 'col-md-2' from your code-->
                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>

                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>

                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>  

                <div class="dropdown col-sm-3">
                    <!--Your content-->
                </div>
            </div>
        </div>
    <div>
</body>

• Для больших экранов вы можете использовать col-md-3 вместо col-sm-3 .