bootstrap网格系统在多行上的文本对齐方式

Question

我正在尝试设计一个网站，但是无法使文本很好地对齐。我开始觉得使用引导网格系统是不可能的。

这是我得到的结果和当前代码：

<div class="row">
    <div class="col-md-3 text-center logo">
        <img src="img/LogoMedium.jpg">
    </div>

    <div class="col-md-3 text-center">
        <table class="case">
            <tbody>
                <tr>
                    <td>Case ID</td>
                    <td class="alt">#1</td>
                </tr>
                <tr>
                    <td>Title</td>
                    <td class="alt">Lorem ipsum</td>
                </tr>
                <tr>
                    <td>Location</td>
                    <td class="alt">Earth</td>
                </tr>
                <tr>
                    <td>Tags</td>
                    <td class="alt">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-md-6">
        <div id="mapid"></div>
    </div>

    <div class="col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

我希望我能找到一种看起来像这样的方式：

无论我尝试什么，地图都会不断迫使行中的其他列过长，并将文本进一步推低。任何帮助表示赞赏，谢谢

Answer 1

您是对的，这不可能。这是因为这种网格系统可以在css flow layout中运行。要获得所需的内容，您需要使用float。

这是一个快速而肮脏的示例：

.main {
  max-width: 800px;
}

.main div {
  background: #BADA55;
  min-height: 100px;
  margin-bottom: 12px;
}

.header {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.logo, .text {
  width: 100%;
}

.map {
  width: 50%;
  height: 250px;
  margin-left: 12px;
  float: right;
}

<div class="main">
  <div class="map"></div>
  
  <header class="header">
    <div class="logo"></div>
    <div class="text"></div>
  </header>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe? Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  
  
</div>