1

我刚刚开始使用引导程序来转换现有的 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来创建它并进行了很少的更改。有没有很好的免费产品我可以下载，因为我的互联网非常非常慢。

4

1 回答 1

1

检查下面的代码，两件事

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

2nd: 添加 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 -->

于 2017-04-15T03:35:14.343 回答