1

これには非常に多くの質問がありますが、それらはすべて、左側に 1 つの項目、右側に 1 つの項目、またはボタン グループが必要なようです。それらはすべて簡単です。

このbootplyと同様のことを達成するにはどうすればよいですか

しかし、右側のグループの 2 つのボタンの代わりに、他の 2 つの要素- たとえば 2 つの div、または 2 つの h3?

私が何を試しても、これらの 2 つの要素は常に垂直方向に積み重ねられ、フッターの右側に水平方向に整列されません。

編集

@ Harinder88 は、ご覧のとおり、私が求めたことを実行するこのソリューションを提供しました。そのため、大部分のユース ケースで考えられるように、回答として受け入れました。これは、ほとんどの人が達成しようとしていることです。

ここに画像の説明を入力

ただし、列に対してテキストが長すぎる場合は折り返され、すべてが 1 行に収まらないことがわかります。しかし、それはレスポンシブ デザインの妥協点であることは認めます。私の実際のユースケースでは、最後のアイテムを折り返すことができないため、それを解決するには固定幅を与える必要があります。ありがとう@ Harinder88。

4

3 に答える 3

0

ボタングループとボタンをスパンに置き換えることでこれを理解することができたので、うまくいきました。すべてが 1 行に整列し、1 つの項目が左に引っ張られ、2 つの項目が右に引っ張られました。

<div class="panel-footer">
    <div class="panel-title">
        <ul class="list-inline">
            <li class="col-xs-12">
                <span class="pull-right"> 
                    <span>Recording - Last updated at x</span>
                    <span class="trail-status">PUBLISHED</span>
                </span>
                <h5>x comments
                </h5>
            </li>
        </ul>   
    </div>
    <div class="clearfix">
    </div>        
</div>
于 2016-09-06T00:32:57.577 に答える