Javascript 如何格式化CSS和引导程序，以便在页面宽度减小时只有某些元素会换行？

当浏览器窗口足够宽时，“我的页面”元素将按需要呈现：

理想情况下，当页面宽度缩小时，“添加联系人”按钮和“创建活动”尽可能长时间保持在同一行。相反，“创建活动”按钮会在页面缩小时立即切换到下一行：

我相信这是一个如何设置引导行的问题。请在此处找到我的React和HTML：

相关章节：

<section className="row">
      <div className="col-lg-3">
        <Dropdown
          secondary={this.toggle('showCreateDropdown')}
          caption={this.getIntlMessage('addContact')}
          primary={this.toggleForm('contactForm', 'uploadForm')}
          show={this.state.showCreateDropdown}
          fields={[{
            value: this.getIntlMessage('uploadMultiple'),
            action: this.toggleForm('uploadForm', 'contactForm')
          }]} />
      </div>

      <div className="col-lg-3">
        <a target="_blank"
          data-track="click"
          id="createNewsletter"
          data-action="navigate"
          href={props.gemUrl}
          className="btn btn-default newsletter"
          onClick={this.onCreateNewsletter}
          data-label="create-newsletter">
          {self.getIntlMessage('createCampaign')}
        </a>
      </div>

它应该是class=“…”而不是className=“…”

---

您可以在一个div中添加几个col类，以便为每个定义的屏幕大小定义div的单独行为。您可以使用class=“col-xs-12 col-md-6 col-lg-3”来代替class=“col-lg-3”。

这是基本的引导，我建议您阅读文档以获得更好的想法

在这里，您使用了

col-lg-3

，它告诉div在屏幕宽度较大时保持相邻。但是，您没有提到当屏幕宽度为中等（md）、小（sm）或超小（xs）时div应该如何工作。因此，当屏幕宽度减小时，它们都层叠在一起，每一行占用一行，这与

col-*-12

相同。因此，解决方案是定义所有或所需屏幕大小的行为。因此，您的代码应该是：-

<div className="col-lg-3 col-md-6 col-sm-12">
    <Dropdown
      secondary={this.toggle('showCreateDropdown')}
      caption={this.getIntlMessage('addContact')}
      primary={this.toggleForm('contactForm', 'uploadForm')}
      show={this.state.showCreateDropdown}
      fields={[{
        value: this.getIntlMessage('uploadMultiple'),
        action: this.toggleForm('uploadForm', 'contactForm')
      }]} />
  </div>

  <div className="col-lg-3 col-md-6 col-sm-12">
    <a target="_blank"
      data-track="click"
      id="createNewsletter"
      data-action="navigate"
      href={props.gemUrl}
      className="btn btn-default newsletter"
      onClick={this.onCreateNewsletter}
      data-label="create-newsletter">
      {self.getIntlMessage('createCampaign')}
    </a>
  </div>

---

尝试此解决方案。类似于前面所说的，但是为col xs size以及col sm和col md设置媒体断点：

render: function render() {
  var self = this, 
      props = self.props;

  return (
    <div className="controls col-lg-12">
      {this.renderInfo()}
      {this.renderModal()}

      <section className="row">
        <div className="col-xs-4 col-sm-3 col-md-3 col-lg-3">
          <Dropdown
            secondary={this.toggle('showCreateDropdown')}
            caption={this.getIntlMessage('addContact')}
            primary={this.toggleForm('contactForm', 'uploadForm')}
            show={this.state.showCreateDropdown}
            fields={[{
              value: this.getIntlMessage('uploadMultiple'),
              action: this.toggleForm('uploadForm', 'contactForm')
            }]} />
        </div>

        <div className="col-xs-4 col-sm-3 col-md-3 col-lg-3">
          <a target="_blank"
            data-track="click"
            id="createNewsletter"
            data-action="navigate"
            href={props.gemUrl}
            className="btn btn-default newsletter"
            onClick={this.onCreateNewsletter}
            data-label="create-newsletter">
            {self.getIntlMessage('createCampaign')}
          </a>
        </div>

        <div className="col-xs-4 col-sm-3 col-md-3 col-lg-3">
          <span className="count">
            {self.getIntlMessage('totalCount')}: {props.count}
          </span>
        </div>

        <form className="col-xs-12 col-md-3 col-lg-3" onSubmit={self.search}>
          <input
            id="searchBar"
            type="text"
            ref="filterTextInput"
            placeholder={self.getIntlMessage('search')}
            value={self.state.query}
            className={'form-control' + (self.state.searching ? ' searching' :   '')}
            onChange={self.search} />
        </form>
      </section>

      {self.renderForm()}
  </div>
);

render:function render（）{
var self=这个，
道具=自我道具；
返回(
{this.renderInfo（）}
{this.renderModal（）}
{self.getIntlMessage（'totalCount'）}:{props.count}
{self.renderForm（）}
);

我在React中工作，它需要类名而不是类，但我喜欢你的想法。我会使用flexbox；与引导网格不同，它基于内容，所以当空间不足时，它会自然包装，如果你愿意，你可以在发生这种情况时让按钮展开。这是我最初的努力之一，但它导致了一些错误ange的行为看起来傻乎乎的，过早地跳到那个包裹效果