引导程序按钮中的文本和图标与自定义图像的左对齐

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和style上添加其他自定义类，如下所示。

<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 ，而我使用新的自定义类.mytest text-align:left其覆盖为text-align:left

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

根本不应该更改引导程序的基类，因为它将影响整个站点，因此最好与自定义类一起使用