Html Bootstrap 列不工作

Bootstrap Columns Not Working

提问by Matt

Can't figure out why the columns aren't being structured with this 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>

回答by Suganth G

Try this:

尝试这个：

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>

回答by Aibrean

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

You need to nest the interior columns inside of a row rather than just another column. It offsets the padding caused by the column with negative margins.

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

A simpler way would be

一个更简单的方法是

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

回答by UID

Your Nesting DIV structure was missing, you must add another ".row" div when creating nested divs in bootstrap :

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

Here is the Code:

这是代码：

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

---

---

Refer the Bootstrap example description for the same:

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

http://getbootstrap.com/css/

http://getbootstrap.com/css/

Nesting columns

嵌套列

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

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

---

---

Here is the working Fiddle of your code: http://jsfiddle.net/52j6avkb/1/embedded/result/

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

回答by emragins

While this does not address the OP's question, I had trouble with my bootstrap rows / columns while trying to use them in conjunction with KendoListView (even with the bootstrap-kendo css).

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

Adding the following css fixed the problem for me:

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

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

回答by szabcsee

Have you checked that those classes are present in the CSS? Are you using twitter-bootstrap-rails gem? It still uses Bootstrap 2.X version and those are Bootstrap 3.X classes. The CSS grid changed since.

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

You can switch to the bootstrap3 branch of the gem https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3or include boostrap in an alternative way.

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