入力要素が次の行に移動する場合のマージンを適用します

Question

私はブートストラップにインラインフォームを持っています。特定の解像度（768pxを超えるとフォームがすべて垂直になります）では、入力要素の1つが次の行に移動します。その後、（また768pxを超える）別の要素がダウンします。

ここには次のようなものがあります：最初の要素と2番目の要素がダウンした場合に起こることを制御できるようにしたい。たとえば、最初に落ちる要素にmargin-topを追加したいとします。ブートストラップでこれを達成する方法はありますか？これまでのところ、私が試した唯一のものは、a）の特定の要素は、次の行bに行くまさにピクセル幅で検出することがある）などのために、メディアクエリでのCSSを書く：

@media (max-width: 1205px) and (min-width: 768px) { 
    .mg-up { 
    margin-top: 10px; 
    } 
} 

それとも別の解決策は、それらを水平にして768pxまで小さくするようにすることでしょうか？

Answer 1

いいえ、CSSのプロパティはメディアクエリによって決定されるためです。メディアのクエリに基づいてマージンを適用することは合理的なことであると私はこの問題に直面した場合、私は自分自身を行うだろう何かです。

いくつかの提案：

1. は、フォーム入力要素のインライン/ブロックの動作のためのメディアクエリでmarginメディアクエリルールを共見つけます。これはあなたと（そしてそれに取り組んでいる他の人たちに）関係していることを思い出させるためです。それらがデフォルトでブートストラップに含まれている場合は、それを忘れてしまいます。
2. Sassを使用している場合は、$grid-breakpoints変数を_variables.scss（ブートストラップ4内）から読み、その値を代わりに使用して、2つのスタイリング動作が同期したままになるようにします。