使用 bootstrap 的响应式待办事项文本框

Question

我用 React 和 bootstrap 创建待办事项列表。我想让它响应，所以当用户输入长描述时它将适合 window 大小并且不会超出边界，但我得到了这个不需要的结果（附上图片）

@media screen and (min-width:570px) {
  body {
    ...
    font-family: ...
    max-width: 640px;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
      monospace;
  }

  img{
    padding-right: 15px;
  }

  .break-text p{
    word-wrap: break-word;
  }
}

export default class TodoItem extends Component {
  ...
  }

  render() {
    const { title, user ,image, handleDelete, handleEdit } = this.props;
    return (
      
      <li className="list-group-item text-capitalize d-flex justify-content-between my-2">
        { image && <img src={image} /> }
        <div>
        <h2>{user}</h2>
        <p>{this.state.isEdit}</p>
        {this.state.isEdit ? <input
              type="text"
              className="form-control text-capitalize"
              placeholder="add todo item"
              defaultValue={title}
              onChange={this.handleChange}
            /> :<p>{title}</p>}
        </div>
        <div className="todo-icon">    
          <span className="mx-2 text-success" onClick={this.toggleEdit}>
          <i className= {this.state.isEdit ? "fas fa-check" : "fas fa-pen"}/>
        </span>
          <span className="mx-2 text-danger" onClick={handleDelete}>
            <i className="fas fa-trash" />
          </span>
        </div>
      </li>
    );
  }
}

Answer 1

您需要：

为h6添加CSS属性word-wrap: break-word;
编辑文本时将input替换为textarea

检查 example

使用 bootstrap 的响应式待办事项文本框

responsive todo text box using bootstrap

css

react-bootstrap

responsive