タグ付けされた質問 「bootstrap-4」

Bootstrap 4は、人気のあるフロントエンドコンポーネントライブラリの4番目のメジャーバージョンです。Bootstrapフレームワークは、レスポンシブなモバイルファーストのWebサイトとWebアプリの作成を支援します。

17
Twitterブートストラップボタンを右揃えにするにはどうすればよいですか？
ここに簡単なデモがあります： http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li> </ul> 順不同のリストがあり、リストアイテムごとに、左側にテキストを配置し、次に右揃えのボタンを配置します。私はプルライトを使用しようとしましたが、これは完全に整列を台無しにします。何が悪いのですか？
10
左、中央、または右揃えのアイテムを備えたブートストラップNavBar
ではブートストラップ、右に左にロゴA、中央のメニュー項目、およびロゴBを持つナビゲーションバーを作成する最もプラットフォームフレンドリーな方法は何ですか？ これが私がこれまでに試したものであり、ロゴAが左側に、メニュー項目が左側のロゴの隣に、ロゴBが右側にあるように配置されます。 <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> <li><a href="#contact">Menu Item 2</a></li> <li><a href="#about">Menu Item 3</a></li> …
30
Twitterブートストラップの5つの等しい列
作成しているページに5つの同じ列を配置したいのですが、5列グリッドがどのように使用されているのか理解できません。http：//web.archive.org/web/20120416024539/http： // domain7 .com / mobile / tools / bootstrap / sensitive 5列グリッドは、Twitterブートストラップフレームワークの一部の上に示されていますか？
21
ブートストラップ4は、navbarアイテムを右に揃えます
ナビゲーションバーのアイテムを右に揃えるにはどうすればよいですか？ ログインして右に登録したいのですが。しかし、私が試みたすべてが機能していないようです。 これは私がこれまでに試したことです： <div>周辺の<ul>属性：style="float: right" <div>周辺の<ul>属性：style="text-align: right" <li>タグでこれら2つのことを試しました !important最後に追加してそれらすべてをもう一度試しました に変更さnav-itemれnav-rightました<li> にpull-sm-rightクラスを追加しました<li> にalign-content-endクラスを追加しました<li> これは私のコードです： <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …
15
ブートストラップ4の垂直方向の中央揃え
ブートストラップ4を使用して、ページの中央にコンテナーを配置しようとしています。これまでのところ、うまくいきませんでした。任意の助けいただければ幸いです。 私はそれをCodepen.ioで構築したので、皆さんはそれを試してみて、アイデアから私が何をしているのかを教えてください... コードスニペットを表示 var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>'); currentAuthor = …
10
Bootstrap v4のvisible-**およびhidden-**がありません
Bootstrap v3では、多くの場合、hidden-**クラスをclearfixと組み合わせて使用​​して、さまざまな画面幅で複数列のレイアウトを制御します。例えば、 複数のhidden-**を1つのDIVに組み合わせて、複数の列が異なる画面幅で正しく表示されるようにすることができます。 例として、製品の写真の行を、大きな画面サイズでは1行に4つ、小さな画面では3つ、非常に小さな画面では2つ表示したいとします。製品の写真は高さが異なる場合があるため、行が適切に分割されるようにするには、clearfixが必要です。 これはv3の例です... http://jsbin.com/tosebayode/edit?html,css,output v4はこれらのクラスを廃止し、visible / hidden-**-up / downクラスに置き換えたので、代わりに複数のDIVを使用して同じことを行う必要があるようです。 これはv4での同様の例です... http://jsbin.com/sagowihowa/edit?html,css,output したがって、私は単一のDIVから、同じことを達成するために多くのアップ/ダウンクラスを持つ複数のDIVを追加する必要があるまで行ってきました。 から... <div class="clearfix visible-xs-block visible-sm-block"></div> に... <div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div> 私が見落としたv4でこれを行うより良い方法はありますか？
23
エラーを修正する方法。「エラー：ブートストラップツールチップにはテザーが必要です（http://github.hubspot.com/tether/）」
Bootstrap V4を使用していますが、次のエラーがコンソールに記録されます。 エラー：ブートストラップツールチップにはテザーが必要です（http://github.hubspot.com/tether/） Tetherをインストールしてエラーを削除しようとしましたが、機能しません。次のコード行を含めることにより、Tetherを「インストール」しました。 <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css"> <script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> テザーを正しく「インストール」しましたか？ 誰かがこのエラーを削除するのを手伝ってくれる？ あなたが私のサイト上でエラーを表示したい場合は、クリックしてくださいここでは、あなたのコンソールをロードします。
11
Bootstrap 4中央の垂直および水平方向の配置
フォームのみが存在するページがあり、フォームを画面の中央に配置したい。 <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> justify-content-center水平方向のフォームを揃えたが、私は垂直に整列する方法を見つけ出すことはできません。私が使用しようとしましたalign-items-centerとalign-self-center、それは動作しません。 何が欠けていますか？ デモ
4
レスポンシブWebサイトがモバイルで全幅にズームアウト
Bootstrapの応答性のナビゲーションバーをテストしています。デモ用の Webサイトがあります。デスクトップでブラウザーのサイズを変更すると、ナビゲーションバーが上部にある小さなアイコンで折りたたみ可能なメニューになり、クリックしてさらにメニューボタンを表示できるなど、すべて正常に機能します。 しかし、モバイルブラウザー（ChromeとAndroidのインターネットブラウザーで試してみました）から試したところ、レスポンシブデザインが表示されませんでした。ウェブサイトのようなデスクトップの非常に小さいバージョンしか見ることができませんでした。 誰かが私が間違っていることを指摘できますか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.