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

Posted 2023-03-05

【中文标题】如何格式化我的 CSS 和 Bootstrap，以便在页面宽度减小时仅包裹某些元素？

【英文标题】：How can I format my CSS and Bootstrap so that only certain elements wrap when page width decreases?

【发布时间】：2016-01-02 14:49:03

【问题描述】：

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

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

我认为这是我如何设置 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>

【问题讨论】：

我会为此使用 flexbox；与引导网格不同，它基于内容，因此当空间不足时它会自然换行，如果您愿意，可以在发生这种情况时展开按钮。

【参考方案1】：

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

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

【讨论】：

我在 React 工作，它需要 className 而不是 class，但我喜欢你的想法

【参考方案2】：

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

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

【讨论】：

这是我最初的努力之一，但它导致了一些看起来很愚蠢的奇怪行为，过早地跳转到那个包裹效果

【参考方案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>
);