在bootstrap

时间:2015-06-22 20:06:36

标签: css twitter-bootstrap

我利用xs sm md lg列来定义不同屏幕尺寸的列应该有多大。它工作正常但我希望有更好的调整控件并定义我自己的自定义尺寸。

例如,我希望在xs和sm之间存在col大小。

我添加了一个col-ss类,如下所示:

@media (min-width: 600px)
.col-ss-4 {
  width: 33.33333333333333%;
}
@media (min-width: 600px)
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
  float: left;
}

并像这样添加了这个类:

<div class="col-sm-5 col-ss-4">Content Here</div>

但它似乎没有效果。

3 个答案:

答案 0 :(得分:2)

Bootstrap是一个非常大的框架。如果您正在寻找更改基础结构,那么您将不再使用引导程序,这很好。但是,您希望通过使用LESS和SASS等预处理器来修改引导程序的基础。这至少可以让你保持代码模块化。通过修改以下内容可以很容易地添加这样的东西。

github variables.less github grid.less

如果您正在寻找比这更具体的答案,那么您最好按照教程逐步完成。

add-xl-grid-size-option

对于时间估计,预计第一次这样做大约需要30-45分钟。

答案 1 :(得分:1)

浏览此页面以及#34;自定义&#34;一切引导。然后,您可以导出结果。

Bootstrap customize files here

答案 2 :(得分:1)

您可能想尝试以下代码。您没有对同一public class FilterListFragment extends ListFragment implements SearchView.OnQueryTextListener { private ItemListAdapter mAdapter; public FilterListFragment() { //Required empty constructor } public static FilterListFragment newInstance() { return new FilterListFragment(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_filter_string_list, container, false); //Tell the system to call onCreateOptionsMenu setHasOptionsMenu(true); initialize(view); return view; } List<Victoria> list = new ArrayList<Victoria>(); private void initialize(View view) { String[] items = getActivity().getResources().getStringArray(R.array.items); String[] itemDescriptions = getActivity().getResources().getStringArray(R.array.itemDescriptions); for (int n = 0; n < items.length; n++){ Victoria victoria = new Victoria(); victoria.setID(); victoria.setItem(items[n]); victoria.setItemDescription(itemDescriptions[n]); list.add(victoria); } mAdapter = new ItemListAdapter(list, getActivity()); setListAdapter(mAdapter); } @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { // Set up search view inflater.inflate(R.menu.menu_search, menu); MenuItem item = menu.findItem(R.id.search); SearchView searchView = (SearchView) MenuItemCompat.getActionView(item); searchView.setOnQueryTextListener(this); searchView.setQueryHint(getResources().getString(R.string.search_query)); } @Override public boolean onQueryTextSubmit(String newText) { return false; } @Override public boolean onQueryTextChange(String newText) { mAdapter.getFilter().filter(newText); return false; } } min-width的最低多个媒体查询。如果你可以少用,你就可以复制课程。

您可以使用bootstrap customize

自定义引导程序文件
size