DeltaG DeltaG - 3 months ago 23
HTML Question

Adjusting space between multiple icons or text in Bootstrap dropdown list item

I'm using a css class to allow me to put an 'add' link and an 'edit' link side-by-side in the same item on a Bootstrap dropdown list.

<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>


Edit: the whole menu item

<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;
}


The item looks like this:
enter image description here

What I want is for the two icons to be fairly snug on the LHS, followed by the text (linked to the edit link). Additionally, is there any way to disable the active link color change? I have taken off the
background-image
, but there's still an associated color change.

Answer

So I put the code you provided into a JSFiddle. With just Bootstrap CSS the two glypicons are right next to each other. Can you provide more of you html and css because something else is causing the styling you do not want.

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>

enter image description here

I will edit my answer when you provide more html and css

** EDIT **

In bootstrap's css file they have this:

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

That css is causing there to be 20px of padding between your two links. Adjust the padding to get the appearance you are looking for.

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