it-swarm.com.ru

Столбцы начальной загрузки не работают

Не могу понять, почему столбцы не структурированы с этим HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-4">  
                <a href="">About</a>
            </div>
            <div class="col-md-4">
                <img src="image.png">
            </div>
            <div class="col-md-4"> 
                <a href="#myModal1" data-toggle="modal">SHARE</a>
            </div>
        </div>
    </div>
</div>
19
Matt

Попробуй это:

ДЕМО

<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="#">About</a>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <img src="image.png" />
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="#myModal1" data-toggle="modal">SHARE</a>
                </div>
            </div>
        </div>
26
Suganth G
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">  
                    <a href="">About</a>
                </div>
                <div class="col-md-4">
                    <img src="image.png">
                </div>
                <div class="col-md-4"> 
                    <a href="#myModal1" data-toggle="modal">SHARE</a>
                </div>
            </div>
        </div>
    </div>
</div>

Вам нужно вложить внутренние столбцы внутри строки, а не просто в другой столбец. Смещает отступы, вызванные столбцом с отрицательными полями.

Более простой способ был бы

<div class="container">
   <div class="row">
       <div class="col-md-4">  
          <a href="">About</a>
       </div>
       <div class="col-md-4">
          <img src="image.png">
       </div>
       <div class="col-md-4"> 
           <a href="#myModal1" data-toggle="modal">SHARE</a>
       </div>
    </div>
</div>
8
Aibrean

Ваша структура Nesting DIV отсутствует, вы должны добавить еще один ".row" div при создании вложенных div в boottrap:

Вот код:

<div class="container">
   <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4"> <a href="">About</a>

                    </div>
                    <div class="col-md-4">
                        <img src="https://www.google.ca/images/srpr/logo11w.png" width="100px" />
                    </div>
                    <div class="col-md-4"> <a href="#myModal1" data-toggle="modal">SHARE</a>

                    </div>
                </div>
            </div>
        </div>
    </div>

См. Описание примера Bootstrap для того же:

http://getbootstrap.com/css/

Вложенные столбцы

Чтобы вложить содержимое в сетку по умолчанию, добавьте новый .row и набор столбцов .col-sm- * в существующий столбец .col-sm- *. Вложенные строки должны включать в себя набор столбцов, которые составляют до 12 или менее (не обязательно использовать все 12 доступных столбцов).


Вот рабочая Fiddle вашего кода: http://jsfiddle.net/52j6avkb/1/embedded/result/

3
UID

Хотя это не решает вопрос OP, у меня были проблемы с моими строками/столбцами начальной загрузки, когда я пытался использовать их в сочетании с Kendo ListView (даже с начальной загрузкой-cndo css). 

Добавление следующего CSS решило проблему для меня:

#myListView.k-widget, #catalog-items.k-widget * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
1
emragins

Проверяли ли вы, что эти классы присутствуют в CSS? Используете ли вы Twitter-bootstrap-Rails gem? Он по-прежнему использует версию Bootstrap 2.X и это классы Bootstrap 3.X. Сетка CSS изменилась с тех пор. 

Вы можете переключиться на ветку bootstrap3 гема https://github.com/seyhunak/Twitter-bootstrap-Rails/tree/bootstrap3 или включить boostrap альтернативным способом.

0
szabcsee