Jak używać klasach Rozstaw Utility na Bootstrap 4

Question

W tym article Widziałem bootstrap klasy narzędziowe 4 rozstaw i używa MB-lg w className

<div class="row"> 
    <div class="col-sm-6 m-b-lg"> 
     <!-- column-small-50%, margin-bottom-large --> 
    </div> 
</div> 

ale gdy używam go na meteorjs z reagują nic nie stało . Czy brakuje mi czegoś lub wtyczki?

 <div className="container-fluid"> 
      <div className="col-xs-6 col-xs-offset-3 m-t-lg"> 
       <h1 className="text-xs-center"> Login </h1> 
       <form> 
        <div className="form-group"> 
         <input type="email" className="form-control" id="inputEmail" placeholder="Email"/> 
        </div> 
        <div className="form-group"> 
         <input type="password" className="form-control" id="inputPassword" placeholder="Password"/> 
         <p className="text-xs-center"><a href="/signup"> Forgot your email or password?</a></p> 
        </div>  
        <div className="form-group"> 
         <button className="btn btn-primary btn-block" type="submit"> Login </button> 
         <p className="text-xs-center"> New to Arcademy? <a href="/signup"> Sign up now.</a></p> 
        </div> 
       </form> 
      </div> 
     </div> 

Answer 1

Patrz dokumentacja Spacing (Bootstrap v4 alpha).

Klasy są nazwane stosując format: {property}-{sides}-{size}

Jeżeli rozmiar jest jeden: * 0 - dla klas, które eliminują margin lub padding przez ustawienie go na 0 * 1 - (domyślnie) dla klas ustawić margines lub dopełnienie do $spacer-x lub $spacer-y * 2 - (o domyślne) dla klas, które wyróżniają margines lub dopełnienie do $spacer-x * 1.5 lub $spacer-y * 1.5 * 3 - (domyślnie) dla klas, które wyróżniają margines lub dopełnienie do $spacer-x * 3 lub $spacer-y * 3.

Użyj więc m-t-3 zamiast m-t-lg.

Answer 2

zasadzie jej zastosowanie tylko w zakresie od 0 do 3. MT-0, MT-1, MT-2, MT-3 lub

Answer 3

aktualizacji 2018 Bootstrap 4

Bootstrap 4 spacing utils have changed od oryginału odpowiedź. Teraz składnia jest prosta:

• margines: m {boki} - {wielkości}
• wyściółka: P {boki} - {wielkości}

Przykłady ..

mb-2 = dolna krawędź dolna 2 jednostki odstępu
m-0 = bez marginesów pt-3 = wyściółka górna 3 urządzenia dystansowe
p-1 = wypełniające wszystkich stron 1 odstęp jednostka

Obecnie 6 rozmiary (0-6), które stanowią część urządzenia standardowego 1rem dystansowego.Dodatkowo oś x (w lewo/w prawo) i oś y (góra/dół) utils dodano:

my-2 = margines Górny & dolne 2 jednostki dystansowe
mx-0 = brak marginesy & prawo
px-3 = wyściółka lewo & prawy 3 jednostki dystansowe

, az utils dystansowe są teraz reagować. Najmniejszy punkt przerwania xs jest domyślny, gdy nie jest używany punkt przerwania.

• margines: m {boki} - {punkt przerwania} - {wielkość}
• wyściółka: P {boki} - {przerwania} - {wielkość}

mt-md-2 = margines top 2 jednostki dystansowe na md (i więcej)
py-sm-0 = nO WYPEŁNIENIE na górę & dołu z sm (i więcej)

Bootstrap 4 Spacing Utils Demo