Question

我使用css课程允许我添加＆＃39;添加＆＃39;链接和编辑＆＃39;在Bootstrap下拉列表中的同一项目中并排链接。

<li class="multilink"><a data-toggle="modal" data-target="#.."><span class="glyphicon glyphicon-plus "></span></a><a href ={% url '...' ... %}><span class="glyphicon glyphicon-edit"></span>&nbsp;Collections</a></li>

编辑：整个菜单项

         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right" >
            <li>
              <a data-toggle="modal" data-target="#SectionRosterModal">Roster
              </a>
            </li>
            <!-- Announcments -->
            <li class="multilink">
              <a data-toggle="modal" data-target="#AnnouncementAddModal">
                <span class="glyphicon glyphicon-plus glyphhover pointerhover">
                </span>
              </a>
              <a href ={% url 'gbook:editlist' to_edit='ann' Course_id=this_course.pk Section_id=active_section.pk %}>
                <span class="glyphicon glyphicon-edit glyphhover">
                </span>&nbsp;Announcements
              </a>
            </li>
            {# <li><a href ="/gbook/edit-ann/{{this_course.pk}}-{{ active_section.pk }}">Edit Announcements</a></li> #}
            <!-- Courses -->
            <li class="multilink">
              <a data-toggle="modal" data-target="#CourseAddModal">
                <span class="glyphicon glyphicon-plus glyphhover pointerhover">
                </span>
              </a>
              <a href={% url 'gbook:doedit' to_edit='cou' pk=this_course.pk Course_id=this_course.pk Section_id=active_section.pk %}>
                <span class="glyphicon glyphicon-edit glyphhover">
                </span>&nbsp;Course
              </a>
            </li>
            <!-- Sections -->
            <li class="multilink">
              <a data-toggle="modal" data-target="#SectionAddModal">
                <span class="glyphicon glyphicon-plus glyphhover pointerhover">
                </span>
              </a>
              <a href ={% url 'gbook:editlist' to_edit='sec' Course_id=this_course.pk Section_id=active_section.pk %}>
                <span class="glyphicon glyphicon-edit glyphhover">
                </span>&nbsp;Sections
              </a>
            </li>
            <!-- Scollections -->
            <li class="multilink">
              <a data-toggle="modal" data-target="#ScollectionAddModal">
                <span class="glyphicon glyphicon-plus glyphhover pointerhover"> 
                </span>
              </a>
              <a href ={% url 'gbook:editlist' to_edit='sco' Course_id=this_course.pk Section_id=active_section.pk %}>
                <span class="glyphicon glyphicon-edit glyphhover">
                </span>&nbsp;Scollections
              </a>
            </li>


          </ul>
        </li>

CSS：

.dropdown-menu > li > a:hover {
    background-image: none;
}
.open> ul>li.multilink{
    display: inline-flex !important;
}

该项目如下所示：

我想要的是两个图标在LHS上相当紧密，然后是文本（链接到编辑链接）。此外，有没有办法禁用活动链接颜色更改？我已经取消了background-image，但仍然存在相关的颜色变化。

Answer 1

因此，我将您提供的代码放入JSFiddle。只有Bootstrap CSS，两个glypicons就在彼此旁边。你可以提供更多的html和css，因为其他东西会导致你不想要的样式。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

<ul>
  <li class="multilink">
    <a data-toggle="modal" data-target="#..">
      <span class="glyphicon glyphicon-plus "></span>
    </a>
    <a href ="">
      <span class="glyphicon glyphicon-edit"></span>&nbsp;Collections
    </a>
  </li>
</ul>

当您提供更多html和css

时，我会编辑我的答案

**编辑**

在bootstrap的css文件中，他们有：

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

那个css导致你的两个链接之间有20px的填充。调整填充以获得您想要的外观。

.dropdown-menu>li>a {
   padding: 3px 5px;
}

在Bootstrap下拉列表项中调整多个图标或文本之间的空间

1 个答案: