带自定义图像的引导按钮中的文本和图标左对齐
问题描述：
我在使用引导框架的按钮中水平对齐时遇到问题。我已经尝试了很多东西，并且阅读了很多东西，但是我的解决方案无法正常工作。有人能帮我吗？先谢谢你。带自定义图像的引导按钮中的文本和图标左对齐
的想法是对准到左按钮的文本，该附加的图像是如下的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>
答
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>
答
尝试在你的编辑器下面的代码，这正在发生，因为类.btn使用text-align:center在默认情况下，我将其与新的自定义类改写为text-align:left.mytest
.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>根本不应该改变自举的基类，因为它会在整个网站的效果，从而更好地利用自定义类
谢谢！你是个天才！ –
如果您将左对齐为.btn-group .btn-default类，那么它将影响所有网站，您需要添加自定义类。 –
@JaimeAlvarez欢迎你） –