問題タブ [twitter-bootstrap-4]

しばらくTwitter Bootstrap 3を使用していましたが、 Twitter Bootstrap 4が登場します。そして newには、たとえばに名前をTwitter Booststrap 変更するなど、いくつかの変更が伴います。現在のバージョンから将来のバージョンへの将来の移行の可能性のために、HTML コードを CSS クラス名の変更から独立させる方法はありますか? たとえば、クラスがある場合、独自のクラスを作成し、既存のクラスから作成する方法はありますか? (疑似コード) のようなもの:.table-condensed.table-sm.table-condensedtable-smallTwitter Bootstraptable-condensed

私はこの瞬間まで純粋なだけを使用しますCSS（私はフルスタックではなく、時々フロントエンド開発者です:)）、これが何らかの方法で可能である場合、誰かが私に答えるなら、おそらくプリプロセッサまたはそのようなもので、私はとても感謝しています - よろしくお願いします！

次のページがあります: http://mindspyder.com/newline/my-account.html

そして、そのページの次のコード:

ここで、ページに移動して青い [削除] ボタンをクリックすると、すべてが完全に機能します。[キャンセル] をクリックし、他のタブのいずれかをクリックしても、正常に機能します。問題は、[削除] をもう一度クリックすると、モーダルを開いたときに [削除] タブに戻らず、前のタブのままになることです。

私は何を間違っていますか？

ブートストラップ 4 カードの左右に 2 つの単語を配置しようとしています...

ただし、問題は次のとおりです。

カード本体から「チョロ」の文字が流れ出て…

これが私のコードです：

custom.css コードは次のとおりです。

私は何を間違っていますか？カード内に別のコンテナタグを入れても機能しません

編集

現在の外観: ありがとう @GLP

誰かがなぜこれが起こるのかを示すことができますか

任意のブラウザーでレンダリングすると、ブートストラップ 4. 入力の高さが選択よりも 3 ピクセル大きくなります。ありがとう

Bootstrap 4 のカード グループ内に異なるサイズのカードを混在させることは可能ですか。左側のサイズに大きなカード (2 倍の幅)、右側に 2 つの小さなカードを配置し、3 つすべてを同じ高さにします。

現在、モバイル デバイスのサイズ変更時にこれらの要素を次のように並べ替えようとしています。
デスクトップ:
http://puu.sh/nwFhQ/2ec567f7be.jpg

{画像}{段落}

モバイル:
http://puu.sh/nwFto/67ec6ef877.jpg

{段落} {画像}

すべての画像が 2 行目のコンテンツの段落の上にあることを望みます。これを達成する正しい方法はありますか？

{画像} {段落}

乾杯

追加した gif でわかるように、ナビゲーション バーのリンクをクリックすると点滅します。何が原因で、それを修正する方法はありますか？グーグルで検索するための適切な説明を実際に見つけることができませんでした。

よろしくお願いします！