Question

表格中每行有4个元素。在某个页面宽度与css我希望每行只包含1个标签和1个文本框，其他元素跳到下面。 [！[在此输入图像描述] [1]] [1]`

#!/usr/bin/gjs

const Lang = imports.lang;
const Gio = imports.gi.Gio;
const GLib = imports.gi.GLib;
const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;

const Home = new Lang.Class({
  Name: "Home",

  // Start snippet 1            
  _enumerateChildrenAsyncCallback: function(dir, result) {
    let fileEnumerator = dir.enumerate_children_finish(result);
    let displayName, file, fileInfo, fileType, iter;
    while ((fileInfo = fileEnumerator.next_file(null))) {
      iter = this.model.append();
      displayName = fileInfo.get_display_name();
      this.model.set(iter, [0], [displayName], 1);

      file = dir.get_child(fileInfo.get_name());
      fileType = file.query_file_type(Gio.FileQueryInfoFlags.NONE, null);
      if (fileType != Gio.FileType.REGULAR) continue;

      file.load_contents_async(null, function(file, result) {
        let [success, contents, etag] = file.load_contents_finish(result);
        let message = "";
        if (success) {
          message = "Finished loading file %s";
        } else {
          message = "Couldn't load file %s";
        }
        log(message.replace("%s", file.get_basename()));
      });
    }
  },

  _init: function() {
    this.application = new Gtk.Application();
    this.application.connect("activate", Lang.bind(this, this._onActivate));
    this.application.connect("startup", Lang.bind(this, this._onStartup));
  },

  _onActivate: function() {
    this._window.show_all();
  },

  _onStartup: function() {
    this.model = new Gtk.ListStore();
    this.model.set_column_types([GObject.TYPE_STRING]);
    let renderer = new Gtk.CellRendererText();

    let dir = Gio.file_new_for_path(GLib.get_home_dir());
    dir.enumerate_children_async("standard::*",
      Gio.FileQueryInfoFlags.NONE,
      GLib.PRIORITY_DEFAULT,
      null,
      Lang.bind(this, this._enumerateChildrenAsyncCallback),
      null);
    /*
     * I would like this line to be run after all files have been read.
     *
     */
    this.model.set_sort_column_id(0, Gtk.SortType.ASCENDING);

    let column = new Gtk.TreeViewColumn({
      title: "Files"
    });
    column.pack_start(renderer, true);
    column.add_attribute(renderer, "text", 0);
    let view = new Gtk.TreeView({
      model: this.model
    });
    view.append_column(column);
    let scrolled = new Gtk.ScrolledWindow();
    scrolled.hscrollbar_policy = Gtk.PolicyType.AUTOMATIC;
    scrolled.Vscrollbar_policy = Gtk.PolicyType.AUTOMATIC;
    scrolled.add(view);
    this._window = new Gtk.ApplicationWindow({
      application: this.application,
      default_height: 300,
      default_width: 400,
      title: "Home, sweet home"
    });
    this._window.add(scrolled);
  }
});

let home = new Home();
home.application.run(ARGV);

`

Answer 1

在多行中显示表格行不是一个好习惯。更好的方法是使用div块并根据屏幕大小覆盖它们的样式。这应该可以解决问题：

    @media (max-width:desired width){
    your styles
    }

此外，您可以使用引导网格系统通过仅向div块http://getbootstrap.com/css/#grid-media-queries添加类来完成所有操作。

Html垂直对齐连续的元素。

1 个答案: