Question

我有一个登录页面分为两部分：

第一部分：col-sm-4，

第二部分：col-sm-8。

我在第一列放了一张图像（1600 * 1000像素），在第二列放了另一张图像（1600 * 1000像素）。

这些图片下面是我的页脚。

问题：

问题1：屏幕需要向下滚动，直到它到达页脚。

问题2：由于col-sm-8中放置了图像，因此需要向右滚动屏幕。

所需行为

希望这两种图像都适合屏幕，以便不需要向下或向右滚动！

在询问之前完成的研究：很多！

这是我的HTML代码：

<!DOCTYPE html>
<head>
  <title>Blah!</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css-register/mystyle.css">
  <link href="https://fonts.googleapis.com/css?family=Abhaya+Libre" rel="stylesheet">
  <script src="https://use.fontawesome.com/6eac8c3c32.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-heart" style="color:red;"></span>Chat With Crush</a>
      </div>
      <div class="collapse navbar-collapse navbar-right" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="expagaincwc.php">Home</a></li>
            <li><a href="#">blah</a></li>
            <li><a href="#">About</a></li>

          </ul>

      </div>


    </div>
  </nav> 
<!-- nav bar ends here -->


    <div class="row">
      <div class="col-sm-4">
        <img src="../img/fourthimg.jpg" >
      </div>
      <div class="col-sm-8">

          <img src="../img/firstimg.jpg" >
        </a>
     </div>
    </div>



<!-- code for footer -->
  <div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container-fluid">
      <div class="navbar-text pull-left">
        <p> Copyright 2017 </p>
      </div>
      <div class="navbar-text pull-right">
       <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="false"></i></a>
        <a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="false"></i></a>
        <a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="false"></i></a>
     </div>
    </div>
  </div>

以下是我的css的代码：

body{
font-family: 'Abhaya Libre', serif;
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

Answer 1

尝试将class="image-responsive"添加到您的图片

Answer 2

好吧......不确定我是否做得对，因为答案听起来对我来说太简单了：）

您是否尝试使用max-width:100%;height:auto;？

我知道它与添加bootstrap类img-responsive的情况相同，但为了防止这种情况发生，请使用我在下面给出的CSS。

让我知道是否有帮助

见小提琴＆gt;的 jsfiddle

已添加代码：

.row img { max-width:100%; height:auto }

编辑：好吧。这是因为bootstrap cols。 cols在768px的屏幕宽度下一个接一个地去。如果你愿意，你可以覆盖这种行为。看小提琴＆gt; fiddle EDIT

!!! 如果你想要1/4和3/4，你应该使用col-sm-3和col-sm-9。您现在使用的是什么，它将行划分为1/3 + 2/3

已添加代码：

@media only screen and (max-width: 768px) { .row .col-sm-4 { float:left;width:25%} .row .col-sm-8 { float:left;width:75%} }

Answer 3

Bootstrap有一种处理列的默认方式。如果您在mediu（md）上设置它将在缩小时使用默认值。因此，如果您希望所有断点上的某些内容相同，则应从最小的col-xs-4

开始

<div class="row">
  <div class="col-xs-4">
    <img class="img-responsive" src="http://placehold.it/1600x1000" >
  </div>
  <div class="col-xs-8">
      <img class="img-responsive" src="http://placehold.it/1600x1000" >
 </div>

请勿忘记图片上的课程class="img-responsive"。

如何适应两个图像＆＃34;水平＆＃34; （并排）使用自举，以便他们不会拉出屏幕？

3 个答案: