Bootstrap列不起作用

Question

无法弄清楚为什么列没有使用此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>

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

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

Answer 3

您的嵌套DIV结构丢失，您必须添加另一个＆＃34; .row＆＃34;在bootstrap中创建嵌套div时的div：

以下是代码：

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

嵌套列

要使用默认网格嵌套内容，请在现有.col-sm- *列中添加新的.row和.col-sm- *列。嵌套行应包含一组最多可添加12个或更少的列（不要求您使用所有12个可用列）。

---

以下是您的代码的工作小提琴：http://jsfiddle.net/52j6avkb/1/embedded/result/

Answer 4

虽然这没有解决OP的问题，但我在尝试使用和Kendo ListView（甚至使用bootstrap-kendo css）时遇到了我的引导行/列的问题。

添加以下css为我解决了问题：

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

Answer 5

您是否检查过CSS中是否存在这些类？ 你在使用twitter-bootstrap-rails gem吗？ 它仍然使用Bootstrap 2.X版本，那些是Bootstrap 3.X类。 CSS网格从此改变了。

您可以切换到gem https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3的bootstrap3分支，或以其他方式包含boostrap。