在LI標簽中對齊3個div

Question

我正在尋找一種bootstrap way來解決它，但是以某種方式沒有成功，因此嘗試了css one，但是它產生的東西是：

如您所見， 123不在列表中。

我的代碼如下：

<li class="list-group-item">
        <div class=".col-lg-2 pull-left">1</div>
        <div class=".col-lg-8 pull-left">2</div>
        <div class=".col-lg-4 pull-left">3</div>
</li>

JS小提琴

http://jsfiddle.net/6bszgn85/

Answer 1

嘗試將列換行。 請參閱grid上的文檔。

<li class="list-group-item">
  <div class="row">
    <div class="col-lg-2">1</div>
    <div class="col-lg-8">2</div>
    <div class="col-lg-4">3</div>
  </div>
</li>

Answer 2

<li class="list-group-item">
    <div class="row">
        <div class=".col-lg-2 pull-left">1</div>
        <div class=".col-lg-8 pull-left">2</div>
        <div class=".col-lg-4 pull-left">3</div>
        </div>
</li>

.col-xx-yy類應該包裝在.row類Fiddle演示中

Answer 3

根據您的代碼，這里的li內部的div是解決方案。

<div class="container">
<ul class="list-group">

    <li class="list-group-item">
    <div class="col-lg-2 pull-left">1</div>
    <div class="col-lg-8 pull-left">2</div>
    <div class="col-lg-4 pull-left">3</div>
    <div class="clearfix"></div>   <!-- Just clear the float and everything will be ok-->
    </li>

</ul>

希望這對您有所幫助。 這是演示 。

Answer 4

我認為使用那些ul，li ...不是一個好主意。

這將使它變得更加容易:)

好吧，也許使用CSS ..嘗試使divs的高度更高:)