GWTBootstrap行が行ではなく列として表示される

Question

私は、ブートストラップを使用して既存のGWTプロジェクトを変換し始めました。次のコードでは、私の最初のimg、h3と2番目のimgは、1つの列（お互いに隣り合っています）の代わりに1つの列（もう1つ下の列）にあります。

<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

、以下のコードをチェックする二つ

第一：あなたのヘッダーコンテナにdisplay:flex;を追加しました（注：ここでは詳細の確認のためのフレックスが古いIEなどでサポートされていませんが...あなたはそれをhttp://caniuse.com/#feat=flexbox使用できることを確認してください） 。

第二：IMG応答

は、第三にする追加のCSSは：

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

を右に、右のIMG ALIGNを左にIMGの整列を残し、それは= 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 -->

を役に立てば幸い