Q&A
書かれている状況が再現するコード（HTML/CSSなど）か、再現するURLを提示されたほうが回答を得やすいと思います。（質問文は編集できます）ライブラリは公式配布サイトのURLを記載し、コードはコードブロックで質問文に追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
<h1>タイトル</h1>
<p>内容</p>
というふうに書くと下の画像のように
ちゃんと改行されるのですが，内容の文字数が少ないとき
右肩にくっつく形になっています
cssの改行を使いまくってみると......
わーいたのしー。
<br>を差し込んでみましたがうまくいきませんでした
ちなみにbootstrap3にcssファイルを差し替えるとちゃんと改行されます。
とりあえずクロームとfirefoxではこうなります。
特に<p>タグの内容を少なく書く予定は今の所ないので放置しますが，どういう原因が考えられるでしょうか。動き的にグリッドシステムみたいなのが働いてるのかなぁとも考えましたが，べつに<h1>タグと<p>タグをそれぞれclass="col-sm-4"みたいに設定しているわけでもないので全くわかりません。
HTML
1<!DOCTYPE html> 2<head lang="ja"> 3<meta charaset="UTF-8"> 4<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 5bootstrap.min.cssをインラインで出力 6 7body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;} 8 9.nav-item{ 10 margin: 0px 20px 0px 20px; 11} 12</style> 13</head> 14<body> 15<nav class="navbar navbar-expand-lg navbar-light bg-light"> 16<div class="container"> 17 <a class="navbar-brand" href="#">タイトル</a> 18 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 19 <span class="navbar-toggler-icon"></span> 20 </button> 21 <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 22 <div class="navbar-nav"> 23 <a class="nav-item nav-link active" href="#"><span class="sr-only">(current)</span>Blog</a> 24<a class="nav-item nav-link" href="#">Works</a> 25<a class="nav-item nav-link" href="#">Profile</a> 26 </div> 27 </div> 28</div> 29</nav> 30<main class="container"> 31<div class="row col-sm-6"> 32<h1>bbb ccc</h1> 33<p class="break">ccc aaa</p> 34</div> 35</main> 36<footer class="footer"> 37 <div class="container"> 38 <p class="text-muted">Copyright © </p> 39 </div> 40</footer> 41<script 42 src="js/jquery-3.3.1.min.js" async> 43</script> 44<script 45 src="js/bootstrap.min.js" async> 46</script> 47</body> 48</html>
meta属性系を省略してあります。
win10 firefox59.0.1です。
bootstrapはv4.0.0で公式サイトから落としてきたやつです
画像はイメージとしては良いと思うのですが、回答の際に再現確認を行うためには実際に質問者さんが実行されているコードが必要です。
再現しませんでした。提示コードはあっているでしょうか？
回答2件
0
https://jsfiddle.net/ms32hak8/ こういう状況ですね。
row を消すか、
HTML
1<div class="col-sm-6"> 2<h1 class="col-sm-12">bbb ccc</h1> 3<p class="break">ccc aaa</p> 4</div>
h1にcol-sm-12 を足すか（必要であればpにも）。
HTML
1<div class="row col-sm-6"> 2<h1 class="col-sm-12">bbb ccc</h1> 3<p class="break">ccc aaa</p> 4</div>
投稿2018/04/03 16:14
総合スコア69400
0
自己解決
何も考えず
<div class="row col-sm-6"> にしていました <div class="row"> <div class="col-sm-6"> で動きました。凡ミスでしたすみません投稿2018/04/03 18:45
総合スコア4
あなたの回答
tips
プレビュー
