GWTBootstrap 行显示为列而不是行

Question

我刚开始使用 bootstrap 转换现有的 GWT 项目。在下面的代码中，我的第一个 img、h3 和第二个 img 位于单个列中（一个在另一个下面）而不是在一行中（彼此相邻）。

<div id="login"  class="container-fluid" style="background-repeat: repeat; background-image: url('body-bg.jpg'); display:flex;">

        <div class="row">
            <div class="col-md-4">
                <img class="myimg" alt="Bootstrap Image Preview" src="logo.png" style="width: 130px;" />
            </div>
            <div class="col-md-4">
                <h3> Welcome to the Award Tracker login page. </h3>
            </div>
            <div class="col-md-4">
                <img class="myimg" alt="Bootstrap Image Preview" src="1stER_icon_256.png" style="width: 130px;" />
            </div>
        </div> <!-- /row -->

        <div class="row">
            <div class="col-md-12">
                <form class="form-signin">
                    <h2 class="form-signin-heading">Please sign in</h2>
                    <input id="accountName" type="text" class="input-block-level" placeholder="Email address">
                    <input id="enterPassword" type="password" class="input-block-level" placeholder="Password">
                    <button id="submit" class="btn btn-large btn-primary" type="submit">Sign in</button>
                </form>
            </div>
        </div> <!-- /row -->

    </div> <!-- /container -->

如何让我的第一行成为一行而不是一列？

另外，有没有办法让img随着我缩小页面而缩小？

我使用 http://www.layoutit.com/build 创建了这个并且做了很少的改动。有没有好的免费产品可以下载，因为我的网速非常非常慢。

Answer 1

检查下面的代码，两件事

第 1 步：将 display:flex; 添加到您的 header 容器（注意：旧版 IE 等不支持 flex...有关更多信息，请在此处查看以确保您可以使用它 http://caniuse.com/#feat=flexbox).

第 2：添加 css 以生成 img 响应

第三：左图左对齐，右图右对齐

.myimg {
    width: 100%;
    height: auto;
}

希望对你有帮助=D

.myheader {
  display: flex;
}

.myimg {
  width: 100%;
  height: auto;
}

.pull-right {
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="login" class="container-fluid" style="background-repeat: repeat; background-image: url('body-bg.jpg');">

  <div class="row myheader">
    <div class="col-md-4">
      <img class="myimg" alt="Bootstrap Image Preview" src="logo.png" />
    </div>
    <div class="col-md-4">
      <h3> Welcome to the Award Tracker login page. </h3>
    </div>
    <div class="col-md-4">
      <img class="myimg  pull-right" alt="Bootstrap Image Preview" src="1stER_icon_256.png" />
    </div>
  </div>
  <!-- /row -->

  <div class="row">
    <div class="col-md-12">
      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input id="accountName" type="text" class="input-block-level" placeholder="Email address">
        <input id="enterPassword" type="password" class="input-block-level" placeholder="Password">
        <button id="submit" class="btn btn-large btn-primary" type="submit">Sign in</button>
      </form>
    </div>
  </div>
  <!-- /row -->

</div>
<!-- /container -->

GWTBootstrap 行显示为列而不是行

GWTBootstrap row appears as a column instead of a row

html

css

gwtbootstrap3