如何格式化CSS和Bootstrap，以便在页面宽度减小时仅包含某些元素？

Question

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

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

我相信这是我如何设置我的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-lg-3”你可以使用class =“col-xs-12 col-md-6 col-lg-3”。

Answer 2

这是基本的Bootstrap，我建议通过文档来获得更好的主意。

在这里，您使用了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>

Answer 3

试试这个解决方案。 之前的说法，但设置col-xs大小的媒体断点以及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>
);