我有一个自定义切换下拉菜单：

import React from 'react';
import 'react-datepicker/dist/react-datepicker.css';

const DateRange = props => (
  <div className="dropdown artesianDropdownContanier">
    <div className="btn-group width100">
      <button type="button" className="btn dropdown-width">{props.selected}</button>
      <button type="button" className="btn dropdown-toggle dropdown-toggle-split artesianDropdownToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span className="sr-only">Toggle Dropdown</span>
      </button>
      <div className="dropdown-menu artesianDropdown">
        {props.dropDownValues.map(val => (
          <span
            key={val}
            value={val}
            className={`dropdown-item ${props.dropdownItemClass}`}
            onClick={() => props.onClick(val)}
            aria-hidden="true"
          >
            {val}
          </span>
        ))
        }
      </div>
    </div>
  </div>
);

export default DateRange;

在页面上看起来像这样：

当我调整网页大小时，组件的箭头部分从引导容器中溢出：

如果我把箭头上的显示设置为“无”，你可以看到下拉按钮本身和文本的大小调整得很完美，这似乎是下拉箭头部分给我带来的麻烦。

有没有办法把这个家伙牢牢地留在他的母容器里？谢谢！