web-dev-qa-db-ja.com

Twitter Bootstrap：CSSクラスに組み込まれたmargin-bottom

使用するマージン下部クラスが組み込まれていますか？ bottom5好き

<div class="col-lg-2 bottom5"></div>

しかし、これは機能しません。

csstwitter-bootstraptwitter-bootstrap-3
13
user1765862

あなたが説明したようなマージンのbootstrapクラスはありません。理由は、マージン0〜10または100のクラスの必要性、およびpx、em、%など.

独自のクラスをかなり簡単に作成できます。崇高なテキストエディターと複数選択により、さらに簡単に。

そうは言っても、すべてのスタイルルールをHTMLに抽象化する必要はありません。元のCSSは、マージンなど、要素に固有の何かに役立ちます。すべてのスタイルにbootstrapクラスを使用すると、HTMLが読みにくくなります。

この質問にはBootstrap 3とタグ付けされていますが、Bootstrap 4に更新すると、 ビルトインユーティリティ があります。

10
Goose

Boostrap 4には、この問題を解決する間隔機能があります https://getbootstrap.com/docs/4.0/utilities/spacing/

しかし、あなたは古いbootstrapバージョンに固執している、またはそれをすべて使用することはできず、マージンとパディングクラスの完全なリストが必要な場合は、ここにあります

/* MARGINS & PADDINGS */
.p-xxs {
  padding: 5px !important;
}
.p-xs {
  padding: 10px !important;
}
.p-sm {
  padding: 15px !important;
}
.p-m {
  padding: 20px !important;
}
.p-md {
  padding: 25px !important;
}
.p-lg {
  padding: 30px !important;
}
.p-xl {
  padding: 40px !important;
}
.m-xxs {
  margin: 2px 4px;
}
.m-xs {
  margin: 5px;
}
.m-sm {
  margin: 10px;
}
.m {
  margin: 15px;
}
.m-md {
  margin: 20px;
}
.m-lg {
  margin: 30px;
}
.m-xl {
  margin: 50px;
}
.m-n {
  margin: 0 !important;
}
.m-l-none {
  margin-left: 0;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l {
  margin-left: 15px;
}
.m-l-md {
  margin-left: 20px;
}
.m-l-lg {
  margin-left: 30px;
}
.m-l-xl {
  margin-left: 40px;
}
.m-l-n-xxs {
  margin-left: -1px;
}
.m-l-n-xs {
  margin-left: -5px;
}
.m-l-n-sm {
  margin-left: -10px;
}
.m-l-n {
  margin-left: -15px;
}
.m-l-n-md {
  margin-left: -20px;
}
.m-l-n-lg {
  margin-left: -30px;
}
.m-l-n-xl {
  margin-left: -40px;
}
.m-t-none {
  margin-top: 0;
}
.m-t-xxs {
  margin-top: 1px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t {
  margin-top: 15px;
}
.m-t-md {
  margin-top: 20px;
}
.m-t-lg {
  margin-top: 30px;
}
.m-t-xl {
  margin-top: 40px;
}
.m-t-xxl {
  margin-top: 50px;
}
.m-t-xxxl {
  margin-top: 60px;
}
.m-t-n-xxs {
  margin-top: -1px;
}
.m-t-n-xs {
  margin-top: -5px;
}
.m-t-n-sm {
  margin-top: -10px;
}
.m-t-n {
  margin-top: -15px;
}
.m-t-n-md {
  margin-top: -20px;
}
.m-t-n-lg {
  margin-top: -30px;
}
.m-t-n-xl {
  margin-top: -40px;
}
.m-r-none {
  margin-right: 0;
}
.m-r-xxs {
  margin-right: 1px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r {
  margin-right: 15px;
}
.m-r-md {
  margin-right: 20px;
}
.m-r-lg {
  margin-right: 30px;
}
.m-r-xl {
  margin-right: 40px;
}
.m-r-n-xxs {
  margin-right: -1px;
}
.m-r-n-xs {
  margin-right: -5px;
}
.m-r-n-sm {
  margin-right: -10px;
}
.m-r-n {
  margin-right: -15px;
}
.m-r-n-md {
  margin-right: -20px;
}
.m-r-n-lg {
  margin-right: -30px;
}
.m-r-n-xl {
  margin-right: -40px;
}
.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b {
  margin-bottom: 15px;
}
.m-b-md {
  margin-bottom: 20px;
}
.m-b-lg {
  margin-bottom: 30px;
}
.m-b-xl {
  margin-bottom: 40px;
}
.m-b-n-xxs {
  margin-bottom: -1px;
}
.m-b-n-xs {
  margin-bottom: -5px;
}
.m-b-n-sm {
  margin-bottom: -10px;
}
.m-b-n {
  margin-bottom: -15px;
}
.m-b-n-md {
  margin-bottom: -20px;
}
.m-b-n-lg {
  margin-bottom: -30px;
}
.m-b-n-xl {
  margin-bottom: -40px;
}
.space-15 {
  margin: 15px 0;
}
.space-20 {
  margin: 20px 0;
}
.space-25 {
  margin: 25px 0;
}
.space-30 {
  margin: 30px 0;
}

WebAppLayersによる Homer Responsive Admin Theme から取得されます。著者はそれを共有することを気にしないと思います。おそらく、Web開発者の時間を20分節約できます。

15
Piotr Salaciak

bootstrap 4で利用可能

例

<div class="mb-5 p-5"> margin-bottom and padding with size 5 </div>

使用できます

m for margin
p for padding

そして側面のために：

t - top
b - bottom
l - left
r - right
x - both left & right
y - both top & bottom
blank -all sides

サイズ-0、1、2、3、4、5

12
Shivam Chhetri

margin-bottom-5という名前のクラスを追加してみてください

クラスは次の形式を使用して名前が付けられます：{property}-{sides}-{size}

from： here

6
CriPstian

UPDATE：Bootstrap 4 Classes

マージンとパディングを追加するブートストラップ4クラス

ブートストラップ4には、幅広い応答マージンとパディングユーティリティクラスがあります。これらはすべてのブレークポイントで機能します：xs（<= 576px）、sm（> = 576px）、md（> = 768px）、lg（> = 992px）またはxl（> = 1200px））：

クラスは次の形式で使用されます：{property}{sides}-{size}はxsおよび{property}{sides}-{breakpoint}-{size} sm、md、lg、xlの場合。

Propertyは次のいずれかです。

m-マージンを設定します

p-パディングを設定します

側面は次のいずれかです。

t-マージン上部またはパディング上部を設定します

b-margin-bottomまたはpadding-bottomを設定します

l-左マージンまたは左パディングを設定します

r-マージン右またはパディング右を設定

x-パディング左とパディング右、またはマージン左とマージン右の両方を設定します（X軸）

y-padding-topとpadding-bottom、またはmargin-topとmargin-bottom（Y軸）の両方を設定します

空白-要素の4辺すべてにマージンまたはパディングを設定します。サイズは次のいずれかです。

0-マージンまたはパディングを0に設定します

1-マージンまたはパディングを.25remに設定します（font-sizeが16pxの場合は4px）

2-マージンまたはパディングを.5remに設定します（font-sizeが16pxの場合は8px）

3-マージンまたはパディングを1remに設定します（font-sizeが16pxの場合は16px）

4-マージンまたはパディングを1.5remに設定します（font-sizeが16pxの場合は24px）

5-マージンまたはパディングを3remに設定します（font-sizeが16pxの場合は48px）

auto-マージンを自動に設定します

参照リンク： https://getbootstrap.com/docs/4.0/utilities/spacing/

使用方法

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
1
Ashish Singh Rawat