GWTBootstrap行显示为列而不是行

Question

我刚开始使用引导来转换现有的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;你报头的容器（注：柔性不被旧IE等...更多信息检查这里的支持，确保您可以使用它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 -->