form{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-around;
}
form .buttons{
width: 100%;
border: none;
background-color: #ffffff00;
cursor: pointer;
}
form .buttons img{
width: 100%;
}
form button{
width: 100%;
border: none;
color: #fff;
background-color: #000000;
}
Я ладья ie в bootstrap для начинающих. Дело в том, что у меня есть десять кнопок, которые содержат изображение, но в зависимости от оператора if будут отображаться не все кнопки. Моя проблема состоит в том, чтобы отобразить оставшуюся кнопку 3 для каждой строки, используя bootstrap или css. Я использовал таблицы, flexbox, grid, но все равно не могу.
echo "</head>";
echo"<body>";
echo "<script src=\"../js/jquery.js\"></script>";
echo "<form action='../include/newHealthScore.php' method='post'>";
echo "<input type='text' name='input1' id='input1' value='' hidden='true'>
<input type='text' name='input2' id='input2' value='' hidden='true'>
<input type='text' name='input3' id='input3' value='' hidden='true'>";
echo "<div class = 'container'>";
echo "<div class = 'col-md-12'>";
echo "<div class=\"jumbotron jumbotron-fluid\">
<div class=\"container\" align=\"center\">
<h1 class=\"display-4\">Choose a maximum of 3 options</h1>
<p class=\"lead\" align=\"justify\">Depending on your health score calculated, some option will be available for you to choose. Each option will give you points so as to increase your overall health score. Point for blood pressure is displayed in pink. Point for LDL is displayed in yellow. Point for HDL is displayed in blue. Point for HbA1c is displayed in orange. Point for waist is displayed in green. Finally point for whether you smoke or not is displayed in brown.</p>
</div>
</div>";
echo "</div>";
echo "</div>";
echo "<div class = 'container'>";
echo "<div class='d-inline-flex'>";
if( $bPressure < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity1' type='button'><img src='../img/salt.png'></button><br/>";
}
if($bPressure < 10 || $ldl < 10 || $hdl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity2' type='button' ><img src='../img/balancemeal.png'></button><br/>";
echo "</div>";
}
if ($bPressure < 10 || $ldl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity3' type='button'><img src='../img/rawveg.png'></button><br/>";
echo "</div>";
}
if($hdl < 10 || $ldl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity4' type='button'><img src='../img/fat.png'></button><br/>";
echo "</div>";
}
if($ldl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity5' type='button'><img src='../img/sugar.png'></button><br/>";
echo "</div>";
}
if($bPressure < 10 || $hdl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity6' type='button'><img src='../img/alcohol.png'></button><br/>";
echo "</div>";
}
if($bPressure < 10 || $ldl < 10 || $hdl < 10 || $hba1c < 10 || $waist < 10 || $smoke < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity7' type='button'><img src='../img/30min.png'></button><br/>";
echo "</div>";
}
if($bPressure < 10 || $ldl < 10 || $hdl < 10 || $hba1c < 10 || $smoke < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity8' type='button'><img src='../img/walk303.png'></button><br/>";
echo "</div>";
}
if($smoke < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity9' type='button'><img src='../img/smoking.png'></button><br/>";
echo "</div>";
}
if($takePill = "y")
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity10' type='button'><img src='../img/pills.png'></button>";
echo "</div>";
}
echo "<div class= 'd-flex justify-content-center'>";
echo "<input class = 'btn btn-primary rounded-pill btm-lg btn-huge' type='submit' name='Submit' value = 'Submit'/>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "<script src=\"https://code.jquery.com/jquery-3.4.1.slim.min.js\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" ></script>
<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\" ></script>
";
echo "</body>";
[enter image description here][1]
I found a way to do it. but now new problem arises. They are glued together and now i can't put a space between them. Also they do not fill up the container.
Bellow is the new code
<!-- begin snippet: js hide: false console: true babel: false -->