javascript - 如何格式化我的 CSS 和 Bootstrap，以便当页面宽度减小时只有某些元素换行？

Question

当浏览器窗口足够宽时，我的页面元素会按需要呈现:

理想情况下，当页面宽度缩小时，“添加联系人”按钮和“创建营销事件”按钮应尽可能长时间保持在同一行。相反，当页面缩小时，“Create Campaign”按钮会立即转移到下一行:

我认为我设置 Bootstrap 行的方式存在问题。请在这里找到我的 React 和 HTML:http://jsfiddle.net/connorcmu/Lq2ew48v/

相关部分:

<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>

Answer 1

它应该是 class="..."而不是 className="..."

您可以在一个 div 中添加多个 col 类，以针对每个定义的屏幕尺寸定义 div 的单独行为。您可以使用 class="col-xs-12 col-md-6 col-lg-3"而不是 class="col-lg-3"。