使徽标图像响应并与内容部分相关

时间：2018-02-08 04:16:55

标签： html5 twitter-bootstrap css3

我正在尝试使我的徽标图像响应并与我的内容部分保持一致。当我在div上放一个填充时，它看起来很好，具有特定的屏幕尺寸。调整屏幕大小时，它无法正常工作。如何使徽标图像响应并调整大小仍与我的内容部分保持一致。这是我的代码：谢谢

＆＃13;
＆＃13; 
body { background: lime !important; }
    .logo_section {
        background-color: white;
        padding:0 30px;
    }
    .content-section { 
        /* 10 px on top with nav bar */
        
        /* position: absolute; */
        position: relative;
        margin-top: -30px;
        z-index: 9999;
        
        
        padding:0 10px;
        background : white;
        border-color : black;        
        border-width: 5 px;
        border-style: solid;
    }
    
    .import-notes { 
        background : yellow;       
       /* add code to make in full width */
        margin-left: -10px;
        margin-right: -10px;
    }
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 </head>


<body>
<div class="logo_section">
<img class="img-responsive" src="https://i.stack.imgur.com/ymxaR.png">
</div>
    <nav class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">XYZ123</a>
    </div>
</nav>
<div class="container">
  
  <div class="content-section">
      <p >(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
      <p >(2)This is a test </p>
      <p >(3)This is a test </p>
      <p >(4)This is a test </p>
      <p >(5)This is a test </p>
      <p >(6)This is a test </p>
      <p >(7)This is a test </p>
      <p >(8)This is a test </p>
      <p >(12)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
  </div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13; 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Test</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
 body { background: lime !important; }
.logo_section {
    background-color: white;
    padding:0 30px;
}
.content-section { 
    /* 10 px on top with nav bar */

    /* position: absolute; */
    position: relative;
    margin-top: -30px;
    z-index: 9999;


    padding:0 10px;
    background : white;
    border-color : black;        
    border-width: 5 px;
    border-style: solid;
}

.import-notes { 
    background : yellow;       
   /* add code to make in full width */
    margin-left: -10px;
    margin-right: -10px;
}
</style>
</head>


<body>
<div class="logo_section">
  <img class="img-responsive" src="https://i.stack.imgur.com/ymxaR.png">
</div>
<nav class="navbar navbar-default">
 <div class="navbar-header">
  <a class="navbar-brand" href="#">XYZ123</a>
 </div>
</nav>
<div class="container">

 <div class="content-section">
  <p >(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
  <p >(2)This is a test </p>
  <p >(3)This is a test </p>
  <p >(4)This is a test </p>
  <p >(5)This is a test </p>
  <p >(6)This is a test </p>
  <p >(7)This is a test </p>
  <p >(8)This is a test </p>
  <p >(12)This is a test </p>
  <p class="import-notes">This is full width no padding</p>
  </div>
 </div>
</body>    
</html>

2 个答案:

答案 0 :(得分：0)

看看此标题是否符合以下内容和响应问题解决方案。

String myDBData = myTextView.getText().toString();

const chrome = require('selenium-webdriver/chrome');
const firefox = require('selenium-webdriver/firefox');
const {Builder, By, Key, until} = require('selenium-webdriver');

const screen = {
  width: 640,
  height: 480
};

let driver = new Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chrome.Options().headless().windowSize(screen))
    .setFirefoxOptions(new firefox.Options().headless().windowSize(screen))
    .build();

答案 1 :(得分：0)

我找到了解决方案。这是代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
 body { background: lime !important; }
.logo_section {
    background-color: white;
    padding:0 10px;
}
.content-section {  
    position: relative;
    margin-top: -30px;
    z-index: 9999;


    padding:0 10px;
    background : white;
    border-color : black;        
    border-width: 5 px;
    border-style: solid;
}

.import-notes { 
    background : yellow;        
    margin-left: -10px;
    margin-right: -10px;
}
    .wrapper_1{
        background : white;
    }
</style>   
</head>
<body>
<div class="wrapper_1">
<div class="container">

        <div class="logo_section">
              <img class="img-responsive" src="https://i.stack.imgur.com/ymxaR.png">
        </div>



</div>
</div>   
            <nav class="navbar navbar-default">
             <div class="navbar-header">
              <a class="navbar-brand" href="#">XYZ123</a>
             </div>
            </nav>

<div class="container">

 <div class="content-section">
  <p >(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
  <p >(2)This is a test </p>
  <p >(3)This is a test </p>
  <p >(4)This is a test </p>
  <p >(5)This is a test </p>
  <p >(6)This is a test </p>
  <p >(7)This is a test </p>
  <p >(8)This is a test </p>
  <p >(12)This is a test </p>
  <p class="import-notes">This is full width no padding</p>
  </div>
 </div>

＆＃13;
＆＃13; 
body { background: lime !important; }
.logo_section {
    background-color: white;
    padding:0 10px;
}
.content-section {  
    position: relative;
    margin-top: -30px;
    z-index: 9999;


    padding:0 10px;
    background : white;
    border-color : black;        
    border-width: 5 px;
    border-style: solid;
}
    
.import-notes { 
    background : yellow;        
    margin-left: -10px;
    margin-right: -10px;
}
    .wrapper_1{
        background : white;
    }
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
 <body>
<div class="wrapper_1">
<div class="container">
    
        <div class="logo_section">
              <img class="img-responsive" src="https://i.stack.imgur.com/ymxaR.png">
        </div>


        
</div>
</div>   
            <nav class="navbar navbar-default">
             <div class="navbar-header">
              <a class="navbar-brand" href="#">XYZ123</a>
             </div>
            </nav>
    
<div class="container">

 <div class="content-section">
  <p >(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
  <p >(2)This is a test </p>
  <p >(3)This is a test </p>
  <p >(4)This is a test </p>
  <p >(5)This is a test </p>
  <p >(6)This is a test </p>
  <p >(7)This is a test </p>
  <p >(8)This is a test </p>
  <p >(12)This is a test </p>
  <p class="import-notes">This is full width no padding</p>
  </div>
 </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13; 

</body>
</html>
相关问题
最新问题