Question

我正在尝试使用bootstrap实现以下布局

icon  |  text                       | button
icon  |  text                       | button
icon  |  text                       | button

这是我目前的代码，不起作用

<div class="row">
    <img src="icon.png" class="col-sm-2"/>
    <div class="col-sm-7" style="display: inline-block; vertical-align: bottom; background-color: blue;">
        <h4>Text</h4>
    </div>
    <div class="col-sm-2">
        <button type="submit" name="action" value="start" class="btn btn-primary">Button</button>
    </div>
</div>

当然剥去了无关的部分。

我尝试了谷歌调查的所有内容，但无论我尝试了什么，图标都比文字和按钮大得多，所以我最终得到了这样的情况

      |  text                       | button
icon  |                             |
      |                             |

但我想要

      |                             | 
icon  |  text                       | button
      |                             |

我发现了一些明显的重复，但没有一个解决它。

编辑：我选择了这个解决方案。我在最初的演讲中有点作弊，假设它并不重要，但现在我很困惑。这是当前的代码。

<style>
.va {
    display: inline-block;
    vertical-align: middle;
    float: none;
}   
</style>
<div class="container">
  <div class="row col-sm-offset-2 col-sm-8">
    <div class="row">
        <img src="icon.png" class="col-sm-2 va" />
        <div class="col-sm-7 va"><h4>Text</h4></div>
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
                <input type="hidden" name="whatever" value="whatever">
                <div class="col-sm-2 va">
                    <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
                </div>
        </form>
    </div>
  </div>

在表单元素中，按钮最终位于文本下方。如果我删除表单元素，它按预期工作。怎么可能？

Answer 1

我认为这是你想要完成的事情。注意事项，避免将行和列混合在一起 - ＆gt; <div class="row col-sm-offset-2 col-sm-8">而不是将您的列与内容混合，而是将内容放在列中。

工作示例;

div.box {
  display: table;
  width: 100%;
}
div.va {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
.icon {
  height: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">

    <div class="box">

      <div class="col-sm-2 va" style="background: grey;">
        <img src="https://genesisui.com/img/logos/bootstrap.png" class="icon" />
      </div>

      <div class="col-sm-8 va" style="background: teal;">
        <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>

      <div class="col-sm-2 va" style="background: yellow;">
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
          <input type="hidden" name="whatever" value="whatever">
          <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

  </div>

  <div class="row">

    <div class="box">

      <div class="col-sm-2 va" style="background: grey;">
        <img src="https://genesisui.com/img/logos/bootstrap.png" class="icon" />
      </div>

      <div class="col-sm-8 va" style="background: teal;">
        <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>

      <div class="col-sm-2 va" style="background: yellow;">
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
          <input type="hidden" name="whatever" value="whatever">
          <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

  </div>

  <div class="row">

    <div class="box">

      <div class="col-sm-2 va" style="background: grey;">
        <img src="https://genesisui.com/img/logos/bootstrap.png" class="icon" />
      </div>

      <div class="col-sm-8 va" style="background: teal;">
        <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>

      <div class="col-sm-2 va" style="background: yellow;">
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
          <input type="hidden" name="whatever" value="whatever">
          <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

  </div>

</div>

为什么表单的存在打破了垂直对齐？

1 个答案: