Ответ 1

Попробуйте следующее:

DEMO

<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>

Ответ 2

<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>

Ответ 3

Структура вашего Desting DIV отсутствует, вы должны добавить еще один div.row при создании вложенных divs в bootstrap:

Вот код:

<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 доступных столбцов).

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

Ответ 4

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

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

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

Ответ 5

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

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