如何在Bootstrap卡中的图像旁边添加文字?

时间:2017-12-31 04:34:16

标签: css bootstrap-4

我试图在Bootstrap卡中将一些文字放在图像旁边。但是文本最后会出现在下一行。下面是我用来调整图像大小以适应大约一半宽度的CSS,而文本假设是在另一半中。我可以添加什么CSS来使文本浮动到图像的右侧?

.card-img-top {
            height:150px;
            width:150px;
        }

enter image description here

2 个答案:

答案 0 :(得分:1)

在这种情况下你也可以使用flexbox utility classes 下面是一个使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <label for="sause-oth">Other</label> <input type="checkbox" name="sause" id="sause-oth" class="enable component-other"> </div> </div> <div class="row input-row"> <div class="col-sm-12"> <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here"> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <label for="sause-oth">Other</label> <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other"> </div> </div> <div class="row input-row"> <div class="col-sm-12"> <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here"> </div> </div> </div> </section>以垂直居中图像和文本的示例。您的实际实施可能会根据您的具体需求而改变,但这只是为了说明如何开始。

.d-flex .align-items-center

答案 1 :(得分:0)

尝试使用html:

mklink /D "c:\Android-Sdk" "C:\Users\ **YOUR-USERNAME** \AppData\Local\Android\sdk"