【发布时间】：2020-07-20 23:03:34
【问题描述】：
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;
}我是初学者的新手。问题是我有十个包含图像的按钮，但根据 if 语句，并非所有按钮都会显示。我的问题是使用引导程序或 css 响应地显示每行剩余的按钮 3。 我用过表格、弹性盒、网格，但还是不行。
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 -->【问题讨论】：
-
嗨@Kevin - 我建议您尝试使用边框=1 的表格 - 这样当您调整代码时，您可以看到对布局的影响...
标签： php html css bootstrap-4