Html 引导列不工作

无法找出列没有使用此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>

您需要将内部列嵌套在一行中，而不仅仅是另一列。它抵消了具有负边距的列所造成的填充

更简单的方法是

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

---

您的嵌套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>

---

有关相同的信息，请参阅引导示例说明：

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

---

下面是您的代码的工作方式：试试这个：

---

您是否检查了CSS中是否存在这些类？ 你在使用twitter引导程序吗？ 它仍然使用Bootstrap 2.X版本，这些都是Bootstrap 3.X类。CSS网格自年以来发生了更改

---

您可以切换到gem的bootstrap3分支，或者以另一种方式包括bootstrap。

虽然这不能解决OP的问题，但我在尝试将bootstrap行/列与KendoListView（甚至与bootstrap Kendo css）结合使用时遇到了问题

添加以下css修复了我的问题：

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

---

您是否包含BS CSS？：-）在其他新闻中，我不知道BS，但在基础上，你不能嵌套<代码>。列内<代码>。列——你必须把它们放在另一个<代码>中。行< /代码>你会张贴HTML文件的“页眉”吗？@乔是正确的；在引导中嵌套列需要额外的

.row

如果没有另一行，

col-md-12

需要什么？我正在尝试使用一行，包含3列。请参阅更新的编辑。仅当您想增加填充时才需要嵌套（原始示例）。OP的代码“按原样”运行良好：您不需要另一行来完成此任务。@PM77-1运行良好和遵循基于框架文档的正确协议是两件独立的事情。是的，您可以不受影响，但是Bootstrap说“要将内容嵌套到默认网格中，请在现有列中添加一个新的.row和一组*列。”此外，代码需要简化（而不是嵌套）。此外，还有一个问题，即填充创建水平滚动条，这在没有行的情况下是无法解决的。您确定您的窗口大小足够大，可以正确显示它们吗？这是一件显而易见的事情，但是使用md而不是sm，它可能会发生：）它需要是3列，一行，如上所述。你是在谈论代码吗？如果您在我的回答中引用了第二个代码，那么正如我提到的，它是来自Bootstrap的示例。。只是为了解释“筑巢”。或者请再详细解释一下“三栏一行”的确切含义。不管是谁否决了anwser，你能说说否决的原因吗？我给了你+1，因为你的答案确实有效。没有理由对此投反对票。这是一个具有容器div的不同实现。

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

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