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>

原文由 Matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个：

演示

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

原文由 Suganth G 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 Aibrean 发布，翻译遵循 CC BY-SA 3.0 许可协议