0

ひや、

タイトルが示すように、一方のコンテンツが他方よりも多い場合、インライン中央にある 2 つのボタンを取得できないという問題に遭遇しました。

まず第一に、これは現在のように見えます：

ご覧のとおり、ボタンはすぐ上とすぐ下のテキストのパースペクティブでは問題ないように見えますが、黒いボタンの方がテキストが多いため、画像のパースペクティブではずれているように見えます。

コードは次のとおりです (プロジェクトは古い v2 Bootstrap を使用しています)。

<div class="row-fluid visible-desktop">
                    <div class="span6" style="text-align: right;">
                        <a href="#"><button type="button" class="btn btn-default">Ja, tack!</button></a>
                    </div>
                    <div class="span6" style="text-align: left;">
                        <a href="#"><button type="button" class="btn btn-inverse">Nej tack, avsluta</button></a>
                    </div>
                </div>

提案された解決策は、ボタンに均一な幅 (たとえば 200px) を設定することでした。技術的にはプラン B として機能しますが、最初に他の可能性を検討したいと思います。別の解決策は、単にボタンをインラインにしないことですが、このようなものにはそのようなデザインの変更は必要ありません (少なくとも私の意見/思考プロセスでは)。

また、margin-properties を使用してボタンを左にシフトする「ハック」も実験しましたが、クライアント/顧客が独自の裁量でテキストを変更できるようにしているため、これも実行可能ではありません。

すべてのヘルプ/ポインターに感謝します!

4

3 に答える 3

1

このようなものが機能し、2 つではなく 1 つの div になるはずです。

<div class="row-fluid visible-desktop">
    <div class="span12" style="text-align: center;">
        <a href="#"><button type="button" class="btn btn-default">Ja, tack!</button></a>
        <a href="#"><button type="button" class="btn btn-inverse">Nej tack, avsluta</button></a>
    </div>
</div>

ボタン間のギャップをマージンで修正するか、両方のボタンをパディングのある div でラップします。

ただし、これを行うには（ブートストラップなしで）より良い方法が間違いなくあります:)

于 2021-10-27T07:15:57.997 に答える