Почему тег br или тег hr не работают должным образом внутри шаблона vuejs? - PullRequest
Новая
       2

Почему тег br или тег hr не работают должным образом внутри шаблона vuejs?

0 голосов
/ 07 апреля 2019

Я изучаю vuejs cli и создаю пример веб-сайта, где можно перечислить их статьи. Но, кстати, тег br, который используется для разбиения на несколько строк, не работает. Когда я попробовал hr, который добавляет горизонтальную линию, на переднем конце. Это закончилось в огромном горизонтальном пространстве. Вы можете найти полную информацию о коде ниже:

Я пытался разместить теги br в нескольких местах, но это не сработало.

Я создаю проект, используя vue create frontend В папке внешнего интерфейса я удалил HelloWorld.vue и добавил ListAllArticles.vue со следующим кодом: 

<template>
  <div class="container-fluid">
    <div class="row">
      <img src="../assets/propic.jpg" alt="Profile Pic">
      <h3>This is title 1</h3>
      <p>This is title description 1</p><br>
      <p>By John Doe</p>
    </div>
    <hr>
    <div class="row">
      <img src="../assets/propic.jpg" alt="Profile Pic">
      <h3>This is title 2</h3><br>
      <p>This is title description 2</p><br>
      <p>By John Doe</p>
    </div>
    <hr>
    <div class="row">
      <img src="../assets/propic.jpg" alt="Profile Pic">
      <h3>This is title 3</h3><br>
      <p>This is title description 3</p><br>
      <p>By John Doe</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style>
img {
    width: 100px;
    height: 100px;
}

hr {
background-color: #eee;
border: 0 none;
color: #eee;
height: 2px;
}
</style>

. Соответствующий маршрутизатор index.js - 

import Vue from 'vue'
import Router from 'vue-router'
import ListAllArticles from '@/components/ListAllArticles'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'ListAllArticles',
      component: ListAllArticles
    }
  ]
})

Соответствующий index.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>markit</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

  </body>
</html>

Интересно, что даже класс img-round не работает.

Вывод с тегом br выглядит так: https://ibb.co/q0nP3Mx

Хотя, когда я добавляю тег hr, вывод будет здесь: https://ibb.co/tcFz0bF

Как видите, тег br / hr работает не так, как ожидалось, и не могу с этим справиться

...