Question

我有一个网站，其中包含一些代码模块，如下所示。您可以从引导程序更改网格系统的大小。这就是为什么我的网格是我的第一行。使用我当前的代码，它看起来像这样：

＆＃13;

UINavigationBar

＆＃13;

class Cities_model extends CI_Model {

    public function __construct() 
    {
        parent::__construct();
    }

    public function save($city)
    {
        $this->db->set($this->setCity($city, null))->insert('cities');

        if ($this->db->affected_rows() > 0) {
            return $this->db->insert_id;
        }
      return null;
    }

    public function update($id, $city)
    {
        $this->db->set($this->setCity($city))->where('id')->update('cities');
        if ($this->db->affected_rows() === 1) {
            return true;
        }
        return false;
    }

    private function setCity($city)
    {
        return array(
            'id' => $city['id'],
            'name' => $city['name']
        );
    }
}

＆＃13;

但我希望它看起来像这样：

我不想在我的模块中使用网格，因为它也必须在其他尺寸中工作。如果那是有道理的。我怎么能断断续续＆＃39;我的网格标签？

Answer 1

您可以重置显示，使其表现为内嵌框。

display的选项可以是：inline，inline-block，inline-table，inline-flex，inline-grid 甚至{{1保持阻止行为但缩小内容。

display:table似乎是从未使用和兼容的最常用选项。

inline-block

.label{
   background-color: #F0A;
   padding: 10px;
   display:inline-block;
  }
 
 .image{
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

如果<div class="col-xs-12 col-sm-6 col-md-4"> <div class="content"> <p class="label">Label</p> <div class="image"> <p>Image</p> </div> </div> </div>不是您想要的，那么display也可以

float:left;

.label{
   background-color: #F0A;
   padding: 10px;
   float:left;
  }
 
 .image{
 clear:both; /* clear the float */
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

Answer 2

你有几个解决方案：您可以为标签指定宽度，例如width: 10%;

或者更好的方法是创建新行：

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
      <div class="row">
        <div class="col-xs-12 col-sm-3 offset-sm-9">
           <p class="label">Label</p>
        </div>
        <div class="col-xs-12">
           <div class="image">
              <p>Image</p>
           </div>
        </div>
  </div>
</div>

如何断开＆＃39;网格中的元素？

2 个答案: