如何使用引导程序对齐 div 和行答案

【问题标题】：How to align divs and rows with bootstrap如何使用引导程序对齐 div 和行
【发布时间】：2017-01-09 09:55:34
【问题描述】：

我无法对齐嵌套行。见下图。我在 md 和 lg 屏幕上有 1 行为 9，3 行为 3。9+3=12。在 sm 屏幕中，我希望第一行为 12，其他 3 行位于其下（4+4+4）。

https://s28.postimg.org/f0xa2380t/helpbootstrap.png

    <div class="container">         
<div class="row">
  <div class="col-md-9 col-sm-12">
    <div class="row ">  
        <div class="col-md-12 large">
        </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-12">
    <div class="row ">
        <div class="col-md-12 col-sm-4 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-4 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-4 small">
        </div>
    </div>          
  </div>  
</div>

    .small{ height:100px; border: 1px solid;} .large{ height:200px; border: 1px solid;  }

https://jsfiddle.net/proabid/qLg72vns/

【问题讨论】：

抱歉，我不确定您要问的是什么？
你使用的是什么版本的 Bootstrap？

标签： css twitter-bootstrap-3 grid-system

【解决方案1】：

您只需要删除第二个 div 中的行：

<div class="container">
  <div class="row">
    <div class="col-md-9 col-sm-12">
      <div class="row ">
        <div class="col-md-12 large">
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-4 small">
        </div>
        <div class="col-md-12 col-sm-4 small">
        </div>
        <div class="col-md-12 col-sm-4 small">
        </div>
      </div>
    </div>
  </div>
</div>

Example bootply

【讨论】：

【解决方案2】：

这适用于 Boostrap v4

<div class="container">
 <div class="row">
   <div class="col-md-9 col-sm-12 large">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui     exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
     </p>
   </div>
  <div class="col-md-3 col-sm-3 col-xs-4 small">
   <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
   </p>
  </div>
  <div class="col-md-3 offset-md-9 col-sm-3 col-xs-4 small">
   <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedi qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
   </p>
  </div>
  <div class="col-md-3 offset-md-9 col-sm-3 col-xs-4 small">
   <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
   </p>
  </div>
</div>

JSFIDDLE

https://jsfiddle.net/qLg72vns/8/

【讨论】：

【解决方案3】：

@Procode 请使用示例文本检查以下代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
			<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
            	<p>ABCD</p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            	 <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4">
            		<p>ABCD</p>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4">
            		<p>ABCD</p>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4">
            		<p>ABCD</p>
                </div>
            </div>
</div>

【讨论】：

【解决方案4】：

删除多余的行确实解决了我的问题。

【讨论】：