引导列不工作

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

虽然这不能解决 OP 的问题，但我在尝试将它们 与 Kendo 结合使用 ListView（即使使用 bootstrap-kendo css）时遇到了引导行/列的问题。

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

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

Answer 2

您的嵌套 DIV 结构丢失，您必须在引导程序中创建嵌套 div 时添加另一个“.row” 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 3

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

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

Answer 4

试试这个：

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 5

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