Question

我正在使用Django建立一个个人网站，我有一个应用程序 - 家。在我的主页上，我想在同一行（并排）上放置图像和文本。我已经尝试了几种方法来使用Bootstrap来做到这一点，但它们似乎都没有用。下面是我的代码，文本显示在图像正下方，而不是NEXT到图像。

home＆＃39的template.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Boostrap -->
  {% load staticfiles %}
  <link rel="stylesheet" href="{% static 'home/css/bootstrap.css' %}">
  <link rel="stylesheet" href="{% static 'home/css/basic.css' %}">

  <!-- Font-Awesome (Icons) -->
  <script src="https://use.fontawesome.com/8e86dbd2db.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>

<body> 
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Pranav Gupta</a>
    </div>
    <ul class="nav navbar-nav">
      {% url 'home:index' as index %}
      {% url 'home:portfolio' as portfolio %}
      {% url 'home:blog' as blog %}
      {% url 'home:contact' as contact %}
      <li {% if request.path == index %} class="active" {% endif %} ><a href="{% url 'home:index' %}">Home</a></li>
      <li {% if request.path == portfolio %} class="active" {% endif %} ><a href="{% url 'home:portfolio' %}">Portfolio</a></li>
      <li {% if request.path == blog %} class="active" {% endif %} ><a href="{% url 'home:blog' %}">Blog</a></li>
      <li {% if request.path == contact %} class="active" {% endif %} ><a href="{% url 'home:contact' %}">Contact</a></li>
    </ul>
  </div>
</nav>

  {% block content %}
  {% endblock %}

  {% block two %}
  {% endblock %}

</body>
</html>

home的index.html

{% extends "home/template.html" %}

<div class="row">
    <div class="col-md-6">
    {% block content %}
    {% load static %}
    <img class="img-responsive center-block" src="{% static "home/img/me.jpg" %}" alt="Me" width="30%" /> 
    {% endblock %}
    </div>

    <div class="col-md-6">
    {% block two %}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    {% endblock %}
    </div>
</div>

Answer 1

您的子（index.html）模板中的block标记之外不应该有任何标记，因为这不会被渲染。尝试将行和列逻辑移动到基本模板：

  <div class="row">
    <div class="col-md-6">
       {% block content %}
       {% endblock %}
    </div>
    <div class="col-md-6">
       {% block two %}
       {% endblock %}
    </div>
  </div>

也就是说，有更简单的方法可以在图像旁边显示文字，但我怀疑这是您希望在其他网页上修复的网站布局的一般问题。

将文本和图像放在Django中的同一行

1 个答案: