如何在AdminLTE的info-box右侧添加下拉菜单？

It looks like the issue with your dropdown not positioning correctly on the right side of the info-box comes down to conflicting layout approaches—AdminLTE's info-box uses flexbox by default, but your CSS is trying to use floats which can cause alignment issues. Let's adjust the code to work with AdminLTE's existing layout system while adding the dropdown properly.

Corrected HTML #

First, let's add the actual dropdown toggle button and menu to your info-box-dropdown div (since it was empty in your original code):

<div class="info-box info-box-sm dropdown">
  <div class="info-box-icon bg-aqua">
    <i class="fa fa-briefcase"></i>
  </div>
  <div class="info-box-content">
    <span class="info-box-text">Title</span>
    <span class="info-box-number">369 records</span>
  </div>
  <div class="info-box-dropdown">
    <!-- Dropdown toggle button -->
    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-ellipsis-v"></i>
    </button>
    <!-- Dropdown menu -->
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Action 1</a></li>
      <li><a href="#">Action 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Action 3</a></li>
    </ul>
  </div>
</div>

Corrected CSS #

Now, let's update the CSS to use flexbox for alignment, ensuring the dropdown stays pinned to the right:

/* Base styles for small info-box with dropdown */
.info-box.info-box-sm {
  min-height: 45px;
  margin-bottom: 15px;
  font-size: 15px;
  /* Use flex to align items horizontally (matches AdminLTE's native behavior) */
  display: flex;
  align-items: center;
}

.info-box.info-box-sm small {
  font-size: 12px;
}

.info-box.info-box-sm .info-box-icon {
  height: 52px;
  width: 52px;
  font-size: 27px;
  line-height: 52px;
  background: blue; /* Your custom background */
}

.info-box.info-box-sm .info-box-content {
  /* Let content take all available space, pushing dropdown to the right */
  flex: 1;
  padding: 0 10px; /* Add spacing between content and dropdown */
  background: red; /* Your custom background (for debugging) */
}

/* Ensure text and number use your custom font size */
.info-box .info-box-content .info-box-text,
.info-box .info-box-content .info-box-number {
  font-size: 15px !important;
}

/* Style the dropdown container */
.info-box.info-box-sm .info-box-dropdown {
  margin-right: 10px;
  background: blue; /* Your custom background (for debugging) */
}

/* Adjust dropdown menu position to align with the toggle */
.info-box.info-box-sm .dropdown-menu-right {
  right: 0;
  left: auto;
}

Key Changes Explained: #

• Flexbox Layout: Switched to display: flex on the info-box to match AdminLTE's native styling, avoiding float-related layout conflicts.
• Flex Grow: Added flex:1 to the info-box content so it fills the space between the icon and dropdown, pushing the dropdown to the far right.
• Functional Dropdown: Added a proper Bootstrap dropdown toggle (compatible with AdminLTE) and menu to make the dropdown interactive.
• Spacing: Added padding and margin to prevent elements from crowding each other, improving overall layout flow.

This should give you the desired effect where the dropdown menu is neatly positioned on the right side of the info-box, working seamlessly with AdminLTE's existing styles.

内容的提问来源于stack exchange，提问作者bluray