对象未出现在组件 React 的中间 Bootstrap/CSS

Question

我用 react-bootstrap 创建了一个自定义时钟，带有增加和减少分钟和秒的按钮。但是，我似乎无法按照自己喜欢的方式设置样式。我不确定如何让增量按钮彼此靠近，并且分和秒似乎无法显示在组件的中心。这是我的代码：

const [timer,userTimer] = useState(0);

export const formatTime = (timer) => {
  const getSeconds = `0${timer % 60}`.slice(-2);
  const minutes = `${Math.floor(timer / 60)}`;

  const getMinutes =
    minutes < 100
      ? `0${minutes % 130}`.slice(-2)
      : minutes < 110
      ? `10${minutes % 130}`.slice(-3)
      : minutes < 120
      ? `11$${minutes % 130}`.slice(-3)
      : minutes < 130
      ? `12$${minutes % 130}`.slice(-3)
      : 130;

  return `${getMinutes}:${getSeconds}`;
};

  return (
        <Col>
          <Row>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
            <Col sm={8}>
              <div className="clock">{formatTime(timer)}</div>
            </Col>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
          </Row>
        </Col>);

clock.css

.clock {
  font-size: 1.6em;
  letter-spacing: 0.1em;
  color: white;
}

我不确定为什么时钟显示在组件中没有很好地居中显示。我还想让 BsFillCaretUpFill 和 BsFillCaredDownFill 靠得更近一些 - 我试过调整 Row 的高度，但它不起作用。请帮忙！

这是我想要的时钟外观的粗略草图，箭头在垂直方向上稍微靠近一点，时钟显示居中：

Answer 1

您可能希望像这样将时钟包裹在 flex div 中：

const [timer,userTimer] = useState(0);

export const formatTime = (timer) => {
  const getSeconds = `0${timer % 60}`.slice(-2);
  const minutes = `${Math.floor(timer / 60)}`;

  const getMinutes =
    minutes < 100
      ? `0${minutes % 130}`.slice(-2)
      : minutes < 110
      ? `10${minutes % 130}`.slice(-3)
      : minutes < 120
      ? `11$${minutes % 130}`.slice(-3)
      : minutes < 130
      ? `12$${minutes % 130}`.slice(-3)
      : 130;

  return `${getMinutes}:${getSeconds}`;
};

  return (
        <Col>
          <Row>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
            <Col sm={8}>
               <div style={{ display : "flex" , justifyContent : "center" , 
                 alignItems : "center" , width : "100%"}} >
                    <div className="clock">{formatTime(timer)}</div>
               </div> 
            </Col>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
          </Row>
        </Col>);

注意

如果您想移动时钟的上下图标，您可以对它们应用带有样式的 css 类名，或者用 div 包裹它们并使用内联样式，如下所示：

 <Col sm={2}>
    <Row>
       <div style={{ transform : `translate(5px , 0)` }} >
         <BsFillCaretUpFill />
       </div>
    </Row>
    <Row>
       <div style={{ transform : `translate(-5px , 0)` }} >
          <BsFillCaretDownFill />
       </div>
    </Row>
  </Col>

对象未出现在组件 React 的中间 Bootstrap/CSS

Object Isn't Appearing in the Middle of Component React Bootstrap/CSS

javascript

css

styling

reactjs

react-bootstrap