Bootstrap / CSS：3列布局中的布局问题

Question

我正在使用Bootstrap 3，我有一个带有3 col-lg-4的全宽行，每列有一个图标，一个标题和一个副标题。但现在我想将图标和文字并排放置，如下所示：

初始HTML：

<div class="cover-container">
  <div class="row">
    <div class="col-lg-4">
      <div class="tile">
        <img src="" />
        <h3>Title</h3>
        <p>Lorem ipsum</p>
      </div>
    </div
    …
    …
  </div>
</div>



.cover-container {
   margin: 0 auto;
   width: 100%;
   padding: 0px;
}
.tile {
  text-align: center;
}

我尝试使用8 col-lg-2，但我不喜欢它将每列显示为智能手机上的一行。 我更喜欢使用3居中col-lg-4，但我无法在模型中放置元素， 你能帮我吗？感谢...

解决方案：

<div class="cover-container">
    <div class="row">
        <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div class="col-xs-6 cover-tile-image">
                    <img src="/assets/images/1.png" alt="" />
                </div>
                <div class="col-xs-6 cover-tile-text">
                    <h3>Title</h3>
                    <p>Lorem ipsum</p>
                </div>
            </div>
        </div> 
            …
            …
    </div> 
</div>


.cover-tile-image {
    text-align: right;
    padding-right: 5px;
}

.cover-tile-text {
    padding-left: 5px;
}

Answer 1

我只想指出你们：

class="col-xs-4 col-sm-4 col-md-4 col-lg-4"

非常多余，相当于简单得多：

class="col-xs-4"

我鼓励你们阅读Bootstrap's grid docs:

  

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何.col-md-类应用于元素不仅会影响其在中型设备上的样式，而且如果不存在.col-lg-类，也会影响大型设备。

Answer 2

我还是使用bootstrap的新手3.查看我创建的下面的演示。希望这会有所帮助。

Fiddle

<强> HTML

    <div class=".col-xs-4 col-sm-4  col-md-4 col-lg-4">
        <div class="tile">
            <img src="http://placekitten.com/g/64/64" class="img-thumbnail" />
        </div>
        <div class="info">
             <h3>Title</h3>

            <p>Lorem ipsum</p>
        </div>
    </div>

<强> CSS

.tile, .info {
    float:left;
}

Answer 3

以下是 working example 的解决方案:)。

Find here有关网格的更多信息。

此解决方案也是回应准备。

<强> HTML：

<div class="row well">
    <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
        <div class="row ">
            <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
                <img src="//placehold.it/50x50" />
            </div>
            <div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
                 <h3>Title</h3>
                 <p>Lorem ipsum</p>
            </div>
        </div>
    </div> <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
        <div class="row ">
            <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
                <img src="//placehold.it/50x50" />
            </div>
            <div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
                 <h3>Title</h3>

                <p>Lorem ipsum</p>
            </div>
        </div>
    </div> <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
        <div class="row ">
            <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
                <img src="//placehold.it/50x50" />
            </div>
            <div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
                 <h3>Title</h3>
                <p>Lorem ipsum</p>
            </div>
        </div>
    </div>
</div>

<强> CSS

h3{margin:0;}

Answer 4

<强> HTML

<div id="wrapper">
<div class="row">
            <div class="columns">
                <img src="//placehold.it/100x100" />
            </div>
            <div class="columns">
                 <h3>Title</h3>

                <p>Lorem ipsum</p>
            </div>
        </div>

<div class="row">
            <div class="columns">
                <img src="//placehold.it/100x100" />
            </div>
            <div class="columns">
                 <h3>Title</h3>

                <p>Lorem ipsum</p>
            </div>
        </div>

<div class="row">
            <div class="columns">
                <img src="//placehold.it/100x100" />
            </div>
            <div class="columns">
                 <h3>Title</h3>

                <p>Lorem ipsum</p>
            </div>
        </div>
</div>

<强> CSS

#wrapper
{
    width:1000px;
    margin:0px;
    padding:0px;
}
.columns
{
    float:left;
    display:inline-block;
    width:120px;
    height:110px;
    }

演示

---

Fiddle Demo

Result Demo

---

输出

---