Question

如何浮动左侧的图标和右侧的文字？

抱歉，我无法发布图片。您可以在http://i.upanh.com/vafsnn

上看到

div class="col-md-3 ">
                <img src="img/service1.png"/>
                <div class="column4">
                    <h1>New way of vision</h1>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, telssa jumalesuada magna mollis euismod. Donec sed odio dui.</p>
                 </div>
            </div>

Answer 1

Bootstrap已经有两个名为.pull-left和.pull-right的类。

所以相应地添加它们。

Answer 2

.pull-left表示左侧浮动，而.pull-right表示右侧浮动

Answer 3

在bootstrap中为浮动元素添加pull-right和pull-left。

<div class="col-md-3 ">
                <img src="img/service1.png" class='pull-left'/>
                <div class="column4" class='pull-right'>
                    <h1>New way of vision</h1>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, telssa jumalesuada magna mollis euismod. Donec sed odio dui.</p>
                 </div>
 </div>

更新：来自你JSFiddle，

1）您尚未包含 bootstrap.css

检查updated JSFiddle

Answer 4

<div class="col-md-3 ">
    <img style="float:left" src="http://lorempixel.com/100/100/"/>
    <div class="column4">
        <h1>New way of vision</h1>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, telssa jumalesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
</div>

小提琴：http://jsfiddle.net/gGxm7/

Answer 5

试试这个CSS：在这里查看完整的jsFiddle：http://jsfiddle.net/AuLtx/

 .image-css{
  height:45px;
  width:45px;
  float:left;
 }

 .column4 { margin-left:100px; margin-top:0px; margin-right:0px;}

关于Bootstrap中的float

5 个答案: