使用自定义图像在引导按钮中左对齐文本和图标

Question

我在按钮处使用bootstrap框架时遇到水平对齐问题。我已经尝试了很多东西而且我已经阅读了很多但我的解决方案无法正常工作。有人能帮我吗？提前谢谢。

这个想法是对齐左边的按钮文本，附加的图像是以下html的输出：

<div class="btn-group btn-group-justified">

    <a href="#" class="btn btn-default" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default" id="bactivities" value="action02">
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Diaper</span>
    </a>

</div>

Answer 1

text-align: left css属性可以影响inline和inline-block元素，您可以将其用于左对齐。

修改

如果您在网站的许多地方使用.btn-group，并且希望所有这些地方都保持左对齐，那么应用通用样式来影响.btn-group的所有匹配项，如下所示：

.btn-group .btn-default {
    text-align: left;
}

但是，如果您在许多地方有很多.btn-group，但您只想要其中一个left-align，那么最好在.btn-group添加其他自定义类，并使用此样式设置如下所示。

<div class="btn-group btn-group-justified custom-btn-group">
     // content goes here...
</div>

样式如下：

.custom-btn-group .btn-default {
    // styles goes here...
}

注意： 请参阅全页模式下的演示。

.btn-group .btn-default {
  text-align: left;
}

.btn-group .btn-default span,
.btn-group .btn-default img {
  vertical-align: middle;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default" id="bactivities" value="action02" >
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35"/>
       <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Diaper</span>
    </a>
</div>

Answer 2

在您的编辑器中尝试以下代码，这是因为默认情况下课程.btn使用text-align:center而我使用新的自定义课程text-align:left将其覆盖为.mytest < / p>

.mytext{
  text-align: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-justified">

    <a href="#" class="btn btn-default mytext" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bactivities" value="action02">
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Diafgfgfgper</span>
    </a>

</div>

<div class="btn-group btn-group-justified">

    <a href="#" class="btn btn-default mytext" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bactivities" value="action02">
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Activfgfgities</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Bofggttle</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Cofgggmputer</span>
    </a>

    <a href="#" class="btn btn-default mytext" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Digfgaper</span>
    </a>

</div>

根本不应该更改bootstrap的基类，因为它会对整个站点产生影响，因此最好使用自定义类