Как переместить мои кнопки вправо и сделать его отзывчивым. Пожалуйста, помогите мне с этим?Как сделать кнопки отзывчивыми?

Вот мой код:

Я использую фоновое изображение в CSS здесь

<!-- begin snippet: js hide: false --> 

<!-- language: lang-html --> 

    <!-- Background image and Buttons --> 
    <div style="background-image:url('images/image.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper"> 
     <div id="homebuttons" class="container"> 
     <!-- Login with a button --> 
     <button style="top:170px; width:25%;" id="logintl" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical" title="Login with MiiSky" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button> 
     <br> 
     <!-- Register with a button --> 
     <br> 
     <br><a href="register.html" style="top:200px; width:25%" id="registertl" title="Register with MiiSky" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical"><span class="glyphicon glyphicon-lock"></span> | Register with SATMP </a> 
     </div> 
     <!-- End homebuttons container--> 
    </div> 
    <!-- End Background image-->

Мои кнопки справа, но он не отвечает.

Выходной ток: Кнопки перемещения из изображения, как показано на рисунке ниже ... Я хочу, чтобы подогнать изображение так, чтобы оно не должно быть изменено, даже если размер окна браузера уменьшается. Любая идея, было бы полезно
[1]: http://i.stack.imgur.com/F5Dty.jpg [2]: http://i.stack.imgur.com/9uL7G.png [3]: http://i.stack.imgur.com/ibhCa.png

источник

2015-11-05 Prajwal K M

1) получить от использования встроенного стайлинга. Вместо этого используйте внешний css. 2) У вас есть тип с 'width = 25%'. Он должен быть 'width: 25%'. – jbutler483

это правильно ... но мои кнопки перемещаются из изображения, как сделать его подходящим в изображении? так что даже если я уменьшу размер браузера, он должен поместиться внутри изображения? –

не используют значение 'px' для вашего объявления' top'. вместо этого используйте '%' – jbutler483

Я получил то, что у хотел ... В принципе, вот что я сделал

Удалены встроенный стиль css от кнопки и тега привязки.
Удалено свойство width.
Добавлен класс bt1 и bt2 к кнопкам.
bt1 и bt2 были в стиле с сверху: 100px и сверху: 120px соответственно. u может изменить пиксель на любую нужную высоту.

Ниже мой рабочий код.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title> 
     About TechGenium 
    </title> 

    <!-- Font-Awesome CDN --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 


</head> 
<body> 

    <div class="container"> 
     <div class="row"> 
      <!-- begin snippet: js hide: false --> 

      <!-- language: lang-html --> 

      <!-- Background image and Buttons --> 
      <div style="background-image:url('images/bg_3.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper"> 
       <div id="homebuttons" class="container"> 
       <!-- Login with a button --> 
       <button id="logintl" type="button" class="bt1 btn btn-info btn-lg sharp pull-right btn-group-vertical" title="Login with MiiSky" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button> 
       <br> 
       <!-- Register with a button --> 
       <br> 
       <br><a href="register.html" id="registertl" title="Register with MiiSky" type="button" class="bt2 btn btn-info btn-lg sharp pull-right btn-group-vertical"><span class="glyphicon glyphicon-lock"></span> | Register with SATMP </a> 
      </div> 
      <!-- End homebuttons container--> 
     </div> 
     <!-- End Background image--> 
    </div> 
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
<style> 
.bt1{ 
    top: 100px; 
} 
.bt2{ 
    top: 120px; 
} 
</style> 
</body> 
</html>

Замените фоновое изображение на любое изображение, которое у вас есть, и код будет работать. Поднимите мои анны, если это вам поможет.

источник

2015-11-05 17:34:53 Niraj

HTML

Вот мой окончательный код с модификацией:

<body> 
     <div class="container"> 
      <div class="row"> 
       <!-- begin snippet: js hide: false --> 

       <!-- language: lang-html --> 



<!-- Background image and Buttons --> 
      <div style="background-image:url('images/bg_3.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper"> 
       <div id="homebuttons" class="container"> 
       <!-- Login with a button --> 
       <button id="logintl" type="button" class="bt1 btn btn-info sharp pull-right btn-group-vertical" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button> 
       <br> 
       <!-- Register with a button --> 
       <br> 
       <br><a href="register.html" id="registertl" type="button" class="bt2 btn btn-info sharp pull-right btn-group-vertical"><span class="glyphicon glyphicon-lock"></span> | Register with SATMP </a> 
      </div> 
      <!-- End homebuttons container--> 
     </div> 
      <!-- End Background image--> 
     </div>

CSS

Здесь я изменил ширину моих кнопок, так она работала отлично для меня !!

<style> 
    .bt1{ 
     top: 50px; 
     width:230px; 
     color: black; 

    } 
    .bt2{ 
     top: 51px; 
     width:230px; 
     color: black; 
    } 
    </style> 

    </body>

Окончательный выход: image1 image2 image3

источник

2015-11-06 06:46:21

Как сделать кнопки отзывчивыми?

ответ

HTML

CSS

Смежные вопросы