Webの<div class="col-md-12"> xxxx </div>にて改行しない

HTML(Webserver)勉強中で、Youtubeのtutorialに従い、実施していたら、参考の画面と違う箇所が発生しました。
現象は、参考の画面と違い改行せず、文字が右に表示する。

Hello there, userの後に改行せず、継続してMessageと表示する。
自分の理解は行の列数の最大(col-md-12)が12なので、改行されると思う。

追記: 正解な画面

コード

<div class="row">
  <div class="col-md-12">
    Hello there, <span id="user"><%= @conn.params["user"] %> </span>
  </div>
  <div class="col-md-8">
    <h3>Message:</h3>
    <ul id="messageList" class="list-unstyled">

    </ul>
    <input type="text" id="newMessage" class="form-control">
  </div>
  <div class="col-md-4">
    <h3>Users Online:</h3>
    <ul id="userList" class="list-unstyled">
    <li></li>
    </ul>
  </div>
</div>

どう処置したら良いか、教えて頂けないでしょうか。

totorial

以上

thyda.eiqau

2019/10/21 03:51

・期待する姿と現状の姿は対比できるように提示されたほうがよいでしょう。現状の姿だけ画像で出されて期待値は動画のURLを出すからそっちで見ろというのは乱暴すぎます・「行の列数の最大(col-md-12)が12なので」と言われてもcol-md-12にどのような意味があるのか (どんなstyleが適用されているか) 提示されていないので何とも言えません。関連するcssをご提示ください・<dov>って何ですか？（ていうかこれを修正したら動くような気がします）

退会済みユーザー

2019/10/21 06:31

htmlにdovというのってありましたっけ？多分、divだと思いますよ。

MickeyOh

2019/10/21 07:30

ご指摘、ありがとうございます。 Tutorialの内容はPhoenixのWebサーバを立ち上げるというもので、 Html、node.js、cssは自動で作成されるようで、仕組みはよくわかりません。正常な画面を追記しました。また、dovは間違いで、divでした。ありがとうございました。修正しても、同じ現象が発生します。コードはtutorialの画面から手入力したものです。 bootstrapのcol-md-12が処理されていないと思いますので、その設定を確認します。

退会済みユーザー

2019/10/21 07:45

あっ、そうなんですね。失礼しましたm(_ _)m では、質問を修正するようお願いします。

行動規範の内容に同意します

回答2件

自己解決

質問がよくわからないとの事、申し訳ありませんでした。
Phoenixサーバーの確認にて、一部の機能で、あまり理解していないHTMLの事なので、どこから、どのように質問すれば良いか、わかりませんでした。いろんなファイルが関連しているので。

最終的解決しましたので、ご報告致します。
解決内容:
bootstrapのcssとjs(col-md-12が定義されている)の設定がなかった。
bootstrapの通りにすれば、動作しました。
css: <head>内に<link xxxx>をセット
js: <body>内に<script xxx>をセット
(指示通りと言っても読んでいません。昔、やった事があったのを思い出しました)

tutorialにはなく、わからなかったのが原因です。

以上

投稿2019/10/21 09:03

MickeyOh

総合スコア25

html
1<dov class="row">
2  <div class="col-md-12">
3    Hello there, <span id="user"><%= @conn.params["user"] %> </span>
4  </div>
5  <div class="col-md-8">
6    <h3>Message:</h3>
7    <ul id="messageList" class="list-unstyled">
8
9    </ul>
10    <input type="text" id="newMessage" class="form-control">
11  </div>
12  <div class="col-md-4">
13    <h3>Users Online:</h3>
14    <ul id="userList" class="list-unstyled">
15    <li></li>
16    </ul>
17  </div>
18</dov>