Question

我正在关注here所描述的教程/代码。有问题的具体代码是这一部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Harrison Kinsley</title>
    <meta charset="utf-8" />
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">

    <style type="text/css">
        html,
        body {
          height:100%
        }
    </style>
</head>

<body class="body" style="background-color:#f6f6f6">
    <div class="container-fluid" style="min-height:95%; ">
        <div class="row">
              <div class="col-sm-2">
                  <br>
                  <center>
                    <img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
                  </center>
              </div>
              <div class="col-sm-10">
                  <br>
                  <center>
                  <h3>Programming, Teaching, Entrepreneurship</h3>
                  </center>
              </div>
        </div><hr>

        <div class="row">
          <div class="col-sm-2">
          <br>

          <br>
           <!-- Great, til you resize. -->
            <!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
            <div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
              <ul class="nav nav-pills nav-stacked">
                <li><a href='/'>Home</a></li>
                <li><a href='/blog/'>Blog</a></li>
                <li><a href='/contact/'>Contact</a></li>
              </ul>
            </div> <!--well bs-sidebar affix-->
          </div> <!--col-sm-2-->
          <div class="col-sm-10">

            <div class='container-fluid'>
            <br><br>
               {% block content %}
               {% endblock %}   
            </div>
          </div>
        </div> 
    </div>
    <footer>
        <div class="container-fluid" style='margin-left:15px'>
            <p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
        </div>
    </footer>   

</body>

</html>

当我运行此代码时，“Home”，“Blog”和“Content”页面的链接都在一行上，它们之间没有空格（即链接如下：HomeBlogContent）。

我希望它们看起来像：

Home
Blog
Content

当我将这一行添加到代码中时：

<p>This is<br>a paragraph<br>with line breaks</p>

输出符合预期：

This is
a paragraph
with line breaks

当我替换此行中的字符串时，如下所示：

<p><li><a href='/'>Home</a></li><br>li><a href='/blog/'>Blog</a></li><br>li><a href='/contents/'>Contents</a></li></p>

我希望能解决我的问题，但事实并非如此。有人可以告诉我哪里出错了，我怎样才能将Home，Blog和Content链接分开打印？感谢。

Answer 1

您缺少<li>代码的左括号。

或者，如果你不是菜鸟，那就去除那些<br>标签。 <li>会自动转到下一行。

＆＃13;

nav {
  display: flex;
  flex-direction: column;
}

＆＃13;

<nav>
  <a href='/'>Home</a>
  <a href='/blog/'>Blog</a>
  <a href='/contents/'>Contents</a>
</nav>

＆＃13;

Answer 2

您的标记在原始文件中看起来不错。但是，从您描述的问题来看，您将Bootstrap 3导入此文件的方式存在问题。检查您是否在bootstrap.min.css

下有文件personal/css/bootstrap.min.css

Answer 3

这应该有效。

<ul>
 <li><a href='/'>Home</a></li>
 <li><a href='/blog/'>Blog</a></li>
 <li><a href='/contents/'>Contents</a></li>
</ul>

HTML CSS：添加新行

3 个答案: