html - 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) .

第二:添加css使img响应

第三:左img向左对齐，右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 -->