Question

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

np.ones

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

另外，有没有办法在收缩页面时使img收缩？

我使用http://www.layoutit.com/build创建了这个并进行了很少的更改。我可以下载一个很好的免费产品，因为我的互联网非常慢。

Answer 1

检查下面的代码，两件事

1st：将display:flex;添加到您的标题容器中（注意：旧的IE等不支持flex ...有关详细信息，请在此处检查以确保您可以使用它http://caniuse.com/#feat=flexbox）。

第二名：添加了css以进行img响应

第3名：左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 -->

GWTBootstrap行显示为列而不是行

1 个答案: