Я работаю над проблемой домашнего задания на Django. У меня проблема с выравниванием в одном из файлов шаблонов Django. Я готовлю приспособление для игры в крикет. Я вытащил данные из моделей и итерации в HTML. Проблема заключается в выравнивании. Моя идея состоит в том, чтобы разместить прибор как на изображении. показано здесь
HTML Код
{% extends 'base.html' %}
<!DOCTYPE html>
<html lang="en">
{% block content %}
<head>
<meta charset="utf-8">
{% load staticfiles %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="B0GXdRwEPrDNU1w1egDmEdk3QVZ4mwznsvhCfobB">
<title>Fixture List Generator, Free web based sports league management software</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/bulma.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="container">
<div class="row">
{% for fixture in fixtures %}
<div class="col-lg-8 col-md-8">
<div class="well">
<legend>
{{fixture.League}}
</legend>
<div class="panel panel-default">
<div class="page-header">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12">
<h3 class="panel-title">
<strong>
{{fixture.clubstate}}
</strong>
</h3>
</div>
<div class="text-nowrap text-right hidden-sm hidden-xs col-md-2" >
<strong>
Date
</strong>{{fixture.date}}
</div>
</div>
</div>
<!-- <div class="panel-body"> -->
<div class="container">
<div class="col-md-4">
<div class="imgAbt">
<img width="150" height="100" src="{{fixture.Team1logo.url}}"/>
<div class="col-md-2">
<h3 class="text-right">{{fixture.Team1}}</h3>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="text-center">
<small>
vs
</small>
</div>
</div>
<div class="col-md-4">
<div class="imgAbt">
<img width="150" height="100" src="{{fixture.Team2logo.url}}"/>
<div class="col-md-2">
<h3 class="text-center">{{fixture.Team2}}</h3>
</div>
</div>
</div>
<div class="container">
<div class="text-left col-xs-6">
<a href="" class="btn btn-primary">
Add Scores
</a>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
{% endfor %}
<div class="container">
<div class="text-left col-xs-6">
<a href="https://www.fixturelist.com/createlistsave/e37db57a-72e2-4a43-b343-2003a50aa395-F8CCKvejsyNsyyBfTBQWGxKPllp8JLic3YJjpP3G" class="btn btn-primary">
Save List
</a>
</div>
</div>
</div>
</div>
{% endblock content %}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Во избежание путаницы. Я прилагаю фактический скриншот мои html выглядит здесь