我在样式方面遇到了一些问题,其中 React-Bootstrap
中的表单未在同一行上对齐,因为表单标签字符串长度不同。这是我的 JSX:
return
(<Card style={{ marginTop: "25px" }}>
<Card.Body>
<Row>
<Col>
<Form>
<Form.Group controlId="goalSupremacy"></Form.Group>
<Form.Label>Goals Suprem</Form.Label>
<Form.Control
type="number"
id="supremacyInput"
name="supremacy"
step="0.01"
value={goalsSupremacy}
min="-7.5"
max="7.5"
style={{
width: "82.5px",
}}
onChange={(e) => setGoalsSupremacy(e.target.value)}
></Form.Control>
</Form>
<Form>
<Form.Group controlId="totalGoals"></Form.Group>
<Form.Label>Goals Total</Form.Label>
<Form.Control
type="number"
id="totalGoalsInput"
name="totalGoals"
step="0.01"
value={totalGoals}
min="0"
max="15"
style={{
width: "82.5px",
}}
onChange={(e) => setTotalGoals(e.target.value)}
></Form.Control>
</Form>
</Col>
<Col>
<Form>
<Form.Group controlId="cornerSupremacy"></Form.Group>
<Form.Label>Corner Suprem</Form.Label>
<Form.Control
type="number"
id="cornerSupremacyInput"
name="cornerSupremacy"
step="0.25"
value={cornersSupremacy}
min="-7.5"
max="7.5"
style={{
width: "82.5px",
}}
onChange={(e) => setCornersSupremacy(e.target.value)}
></Form.Control>
</Form>
<Form>
<Form.Group controlId="totalCorners"></Form.Group>
<Form.Label>Corners Total</Form.Label>
<Form.Control
type="number"
id="totalCornersInput"
name="totalCorners"
step="0.25"
value={totalCorners}
min="0"
max="15"
style={{
width: "82.5px",
}}
onChange={(e) => setTotalCorners(e.target.value)}
></Form.Control>
</Form>
</Col>
<Col>
<Form>
<Form.Group controlId="bookingsSupremacy"></Form.Group>
<Form.Label>Cards Suprem</Form.Label>
<Form.Control
type="number"
id="bookingsSupremacyInput"
name="bookingsSupremacy"
step="0.01"
value={bookingsSupremacy}
min="-5"
max="5"
style={{
width: "82.5px",
}}
onChange={(e) => setBookingsSupremacy(e.target.value)}
></Form.Control>
</Form>
<Form>
<Form.Group controlId="totalBookings"></Form.Group>
<Form.Label>Cards Total</Form.Label>
<Form.Control
type="number"
id="totalBookingsInput"
name="totalBookings"
step="0.01"
value={totalBookings}
min="0"
max="10"
style={{
width: "82.5px",
}}
onChange={(e) => setTotalBookings(e.target.value)}
></Form.Control>
</Form>
</Col>
<Col>
<Form>
<Form.Group controlId="homeRedPercentage"></Form.Group>
<Form.Label>Home Red %</Form.Label>
<Form.Control
type="number"
id="homeRedInput"
name="homeRed"
step="0.01"
value={homeExpectedRed}
min="0"
max="1"
style={{
width: "82.5px",
}}
onChange={(e) => setHomeExpectedRed(e.target.value)}
></Form.Control>
</Form>
<Form>
<Form.Group controlId="awayRedPercentage"></Form.Group>
<Form.Label>Away Red %</Form.Label>
<Form.Control
type="number"
id="awayRedInput"
name="awayRed"
step="0.01"
value={awayExpectedRed}
min="0"
max="1"
style={{
width: "82.5px",
}}
onChange={(e) => setAwayExpectedRed(e.target.value)}
></Form.Control>
</Form>
</Col>
</Row>
<Row>
<Col style={{ marginTop: "12.5px" }}>
<Button
onClick={() => {
calculate();
}}
>
Calculate
</Button>
</Col>
</Row>
</Card.Body>
</Card>)
以及问题的图像。如您所见,Home Red
和 Away Red
中的形式不匹配。我不擅长 CSS 或样式,所以这里需要做些什么来对齐表单?如果可能,最好是响应式解决方案...
答案 0 :(得分:1)
使表单有 5 行,第 1 行和第 3 行包含标题,第 2 行和第 4 行包含字段,第 5 行包含按钮。
我承认这是一个相当随意的平均解决方案,但它应该可以满足您的要求,而且我想不出它怎么会没有响应