Почему уезжает блок thumbnail?

Question

[Илья]

Уезжает блок с классом thumbnail, при масштабировании все становится на свои места, Все делаю на Django.


Код блока для контента:

<div class="container">
        <div class="row">
            {% block content %}

            {% endblock %}
            </div></div>

Код страницы с контентом:

{% extends "base.html" %}
{% load pagination_tags %}
{% block content %}{% autopaginate movie %}
        {% for item in movie %}
        <div class="col-xs-6 col-md-3">
        {% if user.is_authenticated %}
            <a href="{% url 'movie' item.id %}" data-toggle="modal" data-target="#myModal" class="thumbnail-st"><img src="{{ item.thumbnail }}"></a>
            <h6><b><a href="{% url 'movie' item.id %}" data-toggle="modal" data-target="#myModal">{{ item.title }}</a></b></h6>
                {% else %}
            <a href="/accounts/login/" data-toggle="modal" data-target="#myModal" class="thumbnail-st"><img src="{{ item.thumbnail }}"></a>
            <h6><b><a href="/accounts/login/" data-toggle="modal" data-target="#myModal">{{ item.title }}</a></b></h6>
        {% endif %}
        </div>
{% endfor %}
    <div class="col-md-6 col-md-offset-3"><center>{% paginate %}</center></div>
{% endblock %}

Answer 1

[Ankhena]

Посмотрите пример: https://jsfiddle.net/ddc5e6wy/
Изменяйте ширину поля с результатом и смотрите где оказывается серый блок при разной ширине в обоих случаях.
Все поймете.

Суть в том, что тот блок, который должен прилипнуть к правому краю, в коде должен стоять первым.

Можете посмотреть в сторону display:flex, может быть это решит вашу задачу. Или опишите ее конкретнее.

Answer 2

[Дима Паутов]

Потому что нада знать сначала основы, а потом юзать фреймворки!!!
Учите флоаты!! Сетка у бутстрапа построена на флоатах, поэтому, если вы в 1 элемент .row помещаете очень много колонок, то они должны быть одной высоты. Иначе вы получите то, что на скрине.

Answer 3

[Саша]

Илья
прежде чем использовать TW Bootstrap ознакомьтесь с ним.
наверняка проблема в лишнем классе.

например по стилям видно, что почему то у проблемной плитки стиль задан как float:right; вместо float:left;

Comments

[Илья]

Потому что мне надо чтобы он был справа, я изменил стиль thumbnail, сменил там расположение и убрал рамку, но даже с этим все равно эта проблема.

[Саша]

Илья: залейте верстку на jsfiddle либо codepen