BooStrap 4間隔、なぜバージョン3のようにボタンが垂直方向のスペースを持っていないのですか? -- css フィールド と twitter-bootstrap-4 フィールド 関連 問題

Boostrap 4 spacing, why doesn't button have vertical space as in version 3?












0
vote

問題

日本語

バージョン3レイアウト ( HTTPS ://plnkr.co/edit/xda9ewmazh4xdsfzaxvs?P = Preview )

bootstrap 3

<事前> <コード> <div class="container"> <h1>Confirm your details</h1> <div class="row"> <div class="col-md-12"> <div class="panel"> <h4 class="panel-heading">We need to confirm your current address details and contact information.</h4> <p class="panel-body">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="row"> <div class="col-md-12 text-right"> <p> <a href="#" class="btn btn-primary">Confirm</a> </p> </div> </div> </div>

バージョン4レイアウト ( HTTPS ://plnkr.co/edit/ldy00kk6evhdq85zqjgq?P = Preview )

Bootstrap 4ボタン

<事前> <コード> <div class="container"> <h1>Confirm your details</h1> <div class="row"> <div class="col"> <div class="card"> <div class="card-block"> <h4 class="card-title">We need to confirm your current address details and contact information.</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 text-right"> <p> <a href="#" class="btn btn-primary">Confirm</a> </p> </div> </div> </div>

ボタンが垂直方向のスペースを持つのはなぜですか、そしてBootstrap V4に追加するにはどうすればいいですか?

英語

Version 3 layout (https://plnkr.co/edit/XDA9EwMAzH4xDSfZaXvS?p=preview)

Bootstrap 3 layout with margin on the button

<div class="container">   <h1>Confirm your details</h1>   <div class="row">     <div class="col-md-12">       <div class="panel">           <h4 class="panel-heading">We need to confirm your current address details and contact information.</h4>           <p class="panel-body">With supporting text below as a natural lead-in to additional content.</p>       </div>     </div>   </div>   <div class="row">     <div class="col-md-12 text-right">       <p>         <a href="#" class="btn btn-primary">Confirm</a>       </p>     </div>   </div> </div> 

Version 4 layout (https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview)

Bootstrap 4 layout with no margin for the button

<div class="container">   <h1>Confirm your details</h1>   <div class="row">     <div class="col">       <div class="card">         <div class="card-block">           <h4 class="card-title">We need to confirm your current address details and contact information.</h4>           <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>         </div>       </div>     </div>   </div>   <div class="row">     <div class="col-md-12 text-right">       <p>         <a href="#" class="btn btn-primary">Confirm</a>       </p>     </div>   </div> </div> 

Why doesn't the button have vertical space and how should I add it in Bootstrap v4?

</div
     
 
 

回答リスト

1
 
vote
vote
ベストアンサー
 

回答を見つけた:

https://v4-alpha.getbootstrap.com/utilities/spacing/<

基本的に、画面のサイズによって異なる量を追加できるように、余白やパディングを追加するための表記法を追加しました。たとえば、マージン( 'm' を上に追加したい( 't' )。小さい( ' - sm' )サイズのスクリーン。また、デフォルトの間隔( ' - 3' ):

<事前> <コード> <div class="mt-sm-3"> <!-- footer nav --> <a class="btn btn-primary" href="#">Confirm</a> </div>

更新されたplnker: https://plnkr.co/edit/ldy00kk6evhdq85zqjgq?p=preview < / a>

 

Found the answer:

https://v4-alpha.getbootstrap.com/utilities/spacing/

Basically, they have added notation for adding margins and padding so that you can add differing amounts depending on the size of the screen. For example, I want to add margin ('m') to the top ('t') of the div for small ('-sm') sized screens. I also want it to be the default spacing ('-3'):

<div class="mt-sm-3"> <!-- footer nav -->    <a class="btn btn-primary" href="#">Confirm</a> </div> 

Updated plnker: https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview

</div
 
 
 
 
0
 
vote

このリンクに従って "V4への移行 - Bootstrap 4" パネルがドロップされましたが、疑似HRとその下の余白/パディングを提供しているパネルです。

今すぐカードを使用しているので、その余分なCSSの書式設定を失ったと思っていて、それは前のカードの周囲に余白を申請する場合だけです。

に注意してください。「マージントップを避けます。垂直マージンが崩れ、予期せぬ結果が得られます。」 BooStrap Reboot Approach

 

According to this link "Migrating to v4 - Bootstrap 4" Panels have been dropped, it's the Panel that is providing the pseudo HR and a margin/padding below it.

Because it's now using cards, I'm thinking you've lost that extra css formatting and it's just going to be a case of applying margins around the preceding card.

Be aware: "Avoid margin-top. Vertical margins can collapse, yielding unexpected results." Boostrap Reboot Approach

</div
 
 

関連する質問

0  ドロップダウンメガメニューブートストラップ4のクラスの削除を遅らせる方法?  ( How to delay the removal of a class for a dropdown mega menu bootstrap 4 ) 
Navbarトグルでクラスを切り替えようとしていますが、マウスをドロップダウンメニューに移動するとクラスをすばやく削除してメニューを隠します。私はそれが必要なものがクラスの削除だけの遅れであると思いますが、クラスの表示はまだ瞬時になることがあります。これは、...

7  Bootstrap 4 Navbarは右に揃っています  ( Bootstrap 4 navbar align right ) 
Bootstrap 4 WebサイトからNavbarテンプレートに取り組んでいますが、崩壊NAV項目の位置を考慮して問題があります。もともと、トグルボタンはナビゲーションアイテムの左側に配置されます。 しかし、私はそれらをページの右側にしたいので、ボタンと...

106  Bootstrap 4には水平方向の分割器が内蔵されていますか?  ( Does bootstrap 4 have a built in horizontal divider ) 
ブートストラップ4には水平方向の分割器が内蔵されていますか?これを行うことができます、 <事前> <コード> sys = require("sys"), http = require("http"), url = require("url"), path = ...

0  CAPYBARA POLTERGESTは、Clickの後にドロップダウンを切り替えません  ( Capybara poltergeist doesnt toggle dropdowns after click ) 
ブートストラップのウェブサイトを持っていて、何らかの理由でドロップダウンが機能しなくなりました。 私のドロップダウン <事前> <コード> <li class="dropdown nav-item"> <a id="toggle-link">Click...

1  React.jsとBootstrap 4からCarouselコンポーネントを使用する方法  ( How to use the carousel component from bootstrap 4 with react js ) 
これは、私がCarousel =&GTと仕事をしようとしていた次のコードです。それは基本的にサイト上に与えられた例です。 エラーなし、アクティブスライダが表示されていますが、スライド効果は機能していないように見えることができません。私はそれを間違ってやっていま...

-1  複数ブロックを同時に展開/折りたたみますか?  ( Expand collapse several blocks at the same time ) 
私のページに複数のブロックがあります。 Bootstrap 4 Alpha 6バージョンを使用します。 1つのボタンをクリックしてこれらのブロックを拡大/折りたたることをお勧めします。右知って、私は次のJSコードを使い、すべてのブロックを開くだけですが、それら...

0  FlexBoxを使用するには、BootStrap 4 Navbarの作成方法  ( How to make bootstrap 4 navbar to use flexbox ) 
FlexBoxを使用するには、Bootstrap 4 Navbarにしようとしています。私はそれを作ることができました、しかし、まだ奇妙なJavaScriptの問題があります。最初に機能しているようですが、開いているナビゲーションを切り替えてから閉じると、B...

0  ブートストラップ4列は、全行を占めるために残りの列を遮断するようです  ( Bootstrap 4 columns seem to block off rest of columns to take up the full row ) 
私は同じ行に2つのDIVを望みます。 1つは8列を占め、次の列を撮影します。 しかし、それは行の残りの列を自動的に遮断し、COL-XX-XXを使ってすべてのDIVを占めています。これが私が意味するものです: > 行の残りの部分からブロックするのをやめる...

0  Bootstrap 4テーブルセルの左右の位置を左右に配置  ( Bootstrap 4 positioning icon left and right side in table cells ) 
ブートストラップV4でテーブルのセル(左側と左側の左側にある)にアイコンを配置しようとしています。 これを行うには、このようにして絶対位置決めを使用しました: HTML <事前> <コード> <div class="container"> <di...

2  AffixをBootstrap 4で動作させる  ( Getting affix to work with bootstrap 4 ) 
acfix.jsをBootstrap 4と連携させるための試みをしています4。 これが公式のJS:です。 https://github.com/twbs/bootstrap/blob/マスター/ js / acfix.js これは次のように動作します...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有