0

введите сюда описание изображения Верстаю с помощью Бутстрап. Как мне сделать, чтобы блок 3 был на одном уровне с левыми блоками? `

  <div class="row">

    <div class="col-md-3 col-md-pull-9">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a></p>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a></p>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a></p>
        </div>
      </div>
    </div>

  </div><!-- End row -->

</div><!-- End container -->`

<div class="container">


<div class="row">
    <div class="col-xs-1234 col-sm-offset-8 col-sm-4">
        <div class="panel panel-default">
            <div class="panel-heading c-list">
                <span class="title">Block 3</span>
            </div>


            <ul class="list-group" id="contact-list">
                <li class="list-group-item">
                    <div class="col-xs-12 col-sm-4">
                        <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" />
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <span class="name">Scott Stevens</span><br/>
                        <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5842 Hillcrest Rd"></span>
                        <span class="visible-xs"> <span class="text-muted">5842 Hillcrest Rd</span><br/></span>
                        <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(870) 288-4149"></span>
                        <span class="visible-xs"> <span class="text-muted">(870) 288-4149</span><br/></span>
                        <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                        <span class="visible-xs"> <span class="text-muted">[email protected]</span><br/></span>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="list-group-item">
                    <div class="col-xs-12 col-sm-4">
                        <img src="http://api.randomuser.me/portraits/men/97.jpg" alt="Seth Frazier" class="img-responsive img-circle" />
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <span class="name">Seth Frazier</span><br/>
                        <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="7396 E North St"></span>
                        <span class="visible-xs"> <span class="text-muted">7396 E North St</span><br/></span>
                        <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(560) 180-4143"></span>
                        <span class="visible-xs"> <span class="text-muted">(560) 180-4143</span><br/></span>
                        <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                        <span class="visible-xs"> <span class="text-muted">[email protected]</span><br/></span>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="list-group-item">
                    <div class="col-xs-12 col-sm-4">
                        <img src="http://api.randomuser.me/portraits/women/90.jpg" alt="Jean Myers" class="img-responsive img-circle" />
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <span class="name">Jean Myers</span><br/>
                        <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="4949 W Dallas St"></span>
                        <span class="visible-xs"> <span class="text-muted">4949 W Dallas St</span><br/></span>
                        <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(477) 792-2822"></span>
                        <span class="visible-xs"> <span class="text-muted">(477) 792-2822</span><br/></span>
                        <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                        <span class="visible-xs"> <span class="text-muted">[email protected]</span><br/></span>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="list-group-item">
                    <div class="col-xs-12 col-sm-4">
                        <img src="http://api.randomuser.me/portraits/men/24.jpg" alt="Todd Shelton" class="img-responsive img-circle" />
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <span class="name">Todd Shelton</span><br/>
                        <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5133 Pecan Acres Ln"></span>
                        <span class="visible-xs"> <span class="text-muted">5133 Pecan Acres Ln</span><br/></span>
                        <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(522) 991-3367"></span>
                        <span class="visible-xs"> <span class="text-muted">(522) 991-3367</span><br/></span>
                        <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                        <span class="visible-xs"> <span class="text-muted">[email protected]</span><br/></span>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="list-group-item">
                    <div class="col-xs-12 col-sm-4">
                        <img src="http://api.randomuser.me/portraits/women/34.jpg" alt="Rosemary Porter" class="img-responsive img-circle" />
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <span class="name">Rosemary Porter</span><br/>
                        <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5267 Cackson St"></span>
                        <span class="visible-xs"> <span class="text-muted">5267 Cackson St</span><br/></span>
                        <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(497) 160-9776"></span>
                        <span class="visible-xs"> <span class="text-muted">(497) 160-9776</span><br/></span>
                        <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                        <span class="visible-xs"> <span class="text-muted">[email protected]</span><br/></span>
                    </div>
                    <div class="clearfix"></div>
                </li>
            </ul>
        </div>
    </div>

3
  • 1
    Но ведь блок, что Вы пытаетесь подвинуть наверх, находится в другом .row... Объедините все в один row и bootstrap все за вас сделает... Только не забудьте col-md-3 сменить на col-md-4
    – cyadvert
    16 окт 2015 в 15:01
  • Сделал. Не помогает...
    – Vitaliy
    16 окт 2015 в 15:19
  • col-sm-offset-8 необходимо?
    – cyadvert
    16 окт 2015 в 16:11

2 ответа 2

0

Вот такая структура будет работать (часть кода убрано для чистоты показа)

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt="">
          <div class="caption">
            <h4>Thumbnail label 1</h4>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt="">
          <div class="caption">
            <h4>Thumbnail label 2</h4>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt="">
          <div class="caption">
            <h4>Thumbnail label 3</h4>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading c-list">
                <span class="title">Block 3</span>
            </div>

            <ul class="list-group" id="contact-list">
                <li class="list-group-item">
                    <div class="col-xs-12 col-sm-4">
                        <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" />
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <span class="name">Scott Stevens</span><br/>
                        <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5842 Hillcrest Rd"></span>
                        <span class="visible-xs"> <span class="text-muted">5842 Hillcrest Rd</span><br/></span>
                        <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(870) 288-4149"></span>

                    </div>
                    <div class="clearfix"></div>
                </li>
            </ul>
        </div>
    </div>
</div>

Вот здесь я положил рабочее. посмотри.

0

Вам верно подсказали по поводу одного row. Если хотите расположить блоки в одном ряду - расположите их в одном row. А не получилось у вас из-за того, что класс col-sm-offset-8 добавил блоку margin, из-за чего он ушёл вниз. Если его стереть, то всё выстроится в один ряд.

Так же удалил кучу классов. Не знаю, зачем они вам были нужны... Контейнер располагался не на месте.

Вообще крайне рекомендую использовать валидатор для HTML. С его помощью вы сможете найти ошибки в своём коде. Дело в том, что ваш браузер может некоторые проблемы покрывать, но браузер пользователя выдаст в самый неподходящий момент.

Проверьте код, пожалуйста.

<!DOCTYPE html>

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <title>trololo</title>
</head>
<div class="container">
    <div class="row">

        <div class="col-md-3 ">
            <div class="thumbnail">
                <img src="http://placehold.it/500x300" alt="">
                <div class="caption">
                    <h4>Thumbnail label</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
                    <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://placehold.it/500x300" alt="">
                <div class="caption">
                    <h4>Thumbnail label</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
                    <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://placehold.it/500x300" alt="">
                <div class="caption">
                    <h4>Thumbnail label</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
                    <p><a href="#" class="btn btn-info btn-xs" role="button">Full Story</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading c-list">
                    <span class="title">Block 3</span>
                </div>


                <ul class="list-group" id="contact-list">
                    <li class="list-group-item">
                        <div class="col-xs-12 col-sm-4">
                            <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" />
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <span class="name">Scott Stevens</span>
                            <br/>
                            <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5842 Hillcrest Rd"></span>
                            <span class="visible-xs"> <span class="text-muted">5842 Hillcrest Rd</span>
                            <br/>
                            </span>
                            <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(870) 288-4149"></span>
                            <span class="visible-xs"> <span class="text-muted">(870) 288-4149</span>
                            <br/>
                            </span>
                            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                            <span class="visible-xs"> <span class="text-muted">[email protected]</span>
                            <br/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                    <li class="list-group-item">
                        <div class="col-xs-12 col-sm-4">
                            <img src="http://api.randomuser.me/portraits/men/97.jpg" alt="Seth Frazier" class="img-responsive img-circle" />
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <span class="name">Seth Frazier</span>
                            <br/>
                            <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="7396 E North St"></span>
                            <span class="visible-xs"> <span class="text-muted">7396 E North St</span>
                            <br/>
                            </span>
                            <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(560) 180-4143"></span>
                            <span class="visible-xs"> <span class="text-muted">(560) 180-4143</span>
                            <br/>
                            </span>
                            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                            <span class="visible-xs"> <span class="text-muted">[email protected]</span>
                            <br/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                    <li class="list-group-item">
                        <div class="col-xs-12 col-sm-4">
                            <img src="http://api.randomuser.me/portraits/women/90.jpg" alt="Jean Myers" class="img-responsive img-circle" />
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <span class="name">Jean Myers</span>
                            <br/>
                            <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="4949 W Dallas St"></span>
                            <span class="visible-xs"> <span class="text-muted">4949 W Dallas St</span>
                            <br/>
                            </span>
                            <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(477) 792-2822"></span>
                            <span class="visible-xs"> <span class="text-muted">(477) 792-2822</span>
                            <br/>
                            </span>
                            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                            <span class="visible-xs"> <span class="text-muted">[email protected]</span>
                            <br/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                    <li class="list-group-item">
                        <div class="col-xs-12 col-sm-4">
                            <img src="http://api.randomuser.me/portraits/men/24.jpg" alt="Todd Shelton" class="img-responsive img-circle" />
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <span class="name">Todd Shelton</span>
                            <br/>
                            <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5133 Pecan Acres Ln"></span>
                            <span class="visible-xs"> <span class="text-muted">5133 Pecan Acres Ln</span>
                            <br/>
                            </span>
                            <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(522) 991-3367"></span>
                            <span class="visible-xs"> <span class="text-muted">(522) 991-3367</span>
                            <br/>
                            </span>
                            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                            <span class="visible-xs"> <span class="text-muted">[email protected]</span>
                            <br/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                    <li class="list-group-item">
                        <div class="col-xs-12 col-sm-4">
                            <img src="http://api.randomuser.me/portraits/women/34.jpg" alt="Rosemary Porter" class="img-responsive img-circle" />
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <span class="name">Rosemary Porter</span>
                            <br/>
                            <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5267 Cackson St"></span>
                            <span class="visible-xs"> <span class="text-muted">5267 Cackson St</span>
                            <br/>
                            </span>
                            <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(497) 160-9776"></span>
                            <span class="visible-xs"> <span class="text-muted">(497) 160-9776</span>
                            <br/>
                            </span>
                            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="[email protected]"></span>
                            <span class="visible-xs"> <span class="text-muted">[email protected]</span>
                            <br/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End row -->

</div>
<!-- End container -->`

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.