Как разместить кнопки на всю страницу? - PullRequest
Новая
       0

Как разместить кнопки на всю страницу?

0 голосов
/ 08 мая 2020

У меня есть следующий код, когда я помещаю ширину: 33,3% в класс кнопки, кнопки соответствуют 33,3% своей текущей ширины вместо всей страницы. 

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style>
.btn-group{
    display: flex;
    position: absolute;    
    top: 50%;
    justify-content: center;
    width: 100%;
}

.button{
   background-color: #008080;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

.button:hover {
    background-color:#75a3a3;
}

</style>

</head>

<body>
<div class="btn-group">
      <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
      <form action="#" method="post"><button class="button" type="submit">Button 2</button></form> 
      <form action="#" method="post"> <button class="button"type="submit">Button 3</button></form> 
</div>


</body>

Как разместить кнопки на всю страницу? Имея нулевой запас между ними. Спасибо !!

enter image description here

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

Если я правильно понял ваш вопрос, возможно, это поможет. 

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <style>
    .btn-group {
      display: flex;
      position: absolute;
      top: 50%;
      justify-content: center;
      width: 100%;
    }
    
    .btn-group>form {
      flex-grow: 1;
    }
    
    .button {
      width: 100%;
      background-color: #008080;
      /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    .button:hover {
      background-color: #75a3a3;
    }
  </style>

</head>

<body>
  <div class="btn-group">
    <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
    <form action="#" method="post"><button class="button" type="submit">Button 2</button></form>
    <form action="#" method="post"> <button class="button" type="submit">Button 3</button></form>
  </div>


</body>
1 голос
/ 08 мая 2020

Добавьте 2 правила ниже 

.btn-group form:nth-child(1) {
    flex: 1
}
.button {
   width:100%
}

Это то, что вы ищете? 

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style>
.btn-group{
    display: flex;
    position: absolute;    
    top: 50%;
    justify-content: center;
    width: 100%;
}

.button{
   background-color: #008080;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

.button:hover {
    background-color:#75a3a3;
}
.btn-group form:nth-child(1) {
    flex: 1
}
.button {
   width:100%
}
</style>

</head>

<body>
<div class="btn-group">
      <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
      <form action="#" method="post"><button class="button" type="submit">Button 2</button></form> 
      <form action="#" method="post"> <button class="button"type="submit">Button 3</button></form> 
</div>


</body>

Чтобы лучше понять стили Flex, адрес здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...