堆栈内存溢出
  简体   繁体   English

尝试将图像放在col-md-6（在电话上查看时居中）

[英]Trying to place an image in col-md-6, centred when viewed on phone

 原文  2016-05-10 17:30:30  6   1    html/ css/ responsive

问题描述

What is the best practice way of placing an image in a bootstrap col-md-6 so it is centered but only when viewed on a phone? 将图像放置在bootstrap col-md-6以使其居中但仅在电话上查看时的最佳实践是什么？

I'm trying to do this in a queries.css file but I'm stuck. 我正在尝试在queries.css文件中执行此操作，但遇到问题。

Also, Am I supposed to link the site or quote code I'm working on here? 另外，我是否应该在此链接网站或引用我正在研究的代码？ 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">    

<title>nalexanderdev.com</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">  
<link href="css/queries.css" rel="stylesheet">
<link rel="icon"
      type="image/jpg"
      href="img/profile5.jpeg" />


<nav class="navbar navbar-default">
  <div class="containerNavbar">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">nalexanderdev.com</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


  <div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Home</h3></section><br>
            <p>I am a student at National College of Ireland studying Science in Computing: Software Development. In my spare time I make websites.apps using different coding languages.</p>
            <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                  Latest Completed Project:
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <a  href="http://176.32.230.46/omnifoodproject.com/index.php" target="_blank">Project: Omnifood</a></br>
              </div>
            </div>
          </div>

        </div> 
        <div class="col-md-6 col-xs-6">
            <div id="wrapper" style="width:100%; text-align:right">
            <img class="profile" src="img/profile5.jpeg" alt="profile5"/>
            </div>
        </div> 
    </div>
  </div>


        <div class="container">
        <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Bootstrap Projects:
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <a href="http://176.32.230.51/theblog.com/" target="_blank">Project: The Blog</a></br>
                <a href="http://176.32.230.53/businesstheme.com/" target="_blank">Project: Business Theme</a></br>
                <a href="http://176.32.230.52/ecommercetemplate.com/" target="_blank">Project: Ecommerce Template Using LESS</a></br>
                <a href="http://176.32.230.53/edxco.com/" target="_blank">Project: Company Website</a></br>
                <a href="http://176.32.230.52/cmsadminproject.com/login.html" target="_blank">Project: CMS Admin</a></br>
                <a href="http://176.32.230.52/photogallery.com/" target="_blank">Project: Photo Gallery</a></br>
                <a href="http://176.32.230.51/dobblesocialmediasite.com/" target="_blank">Project: Social Media Site</a></br>
                <a href="http://176.32.230.50/fotoshareappproject.com/" target="_blank">Project: Photo Share App</a></br>
                <a href="http://176.32.230.50/agencylandingpage.com/" target="_blank">Project: Agency Landing Page Using LESS</a></br>
                <a href="http://176.32.230.52/sassresumepage.com/" target="_blank">Project: Resume Page using SASS</a></br>
              </div>
            </div>
          </div>
    </div>
        <div class="col-md-4">
            <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Web Dev Projects:
                </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                        <a href="http://176.32.230.50/mymobileapp.com/" target="_blank">Project: My Mobile App(c 2013)</a></br>
                        <a href="http://217.199.187.190/postcodeproject.com/" target="_blank">Project: Postcode Finder</a></br>
                        <a href="http://79.170.44.219/nalexanderdev.com/php/index.php?" target="_blank">Project: Weather Forecast</a></br>
                        <a href="http://www.nalexanderdev.com/wordpress/" target="_blank">Project: Wordpress</a></br>
                        <a href="http://217.199.187.195/landingpageproject.com/" target="_blank">Project: Landing Page</a></br>
                        <a href="http://176.32.230.47/playcodeplayer.com/" target="_blank">Project: CodePlayer</a></br>
                        <a href="http://176.32.230.46/omnifoodproject.com/" target="_blank">Project: Omnifood</a></br>
                        <a href="http://176.32.230.8/nicksthfcsite.com/" target="_blank">Project: THFC site</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingFour">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                  Games:
                </a>
              </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
              <div class="panel-body">
                <a href="http://176.32.230.49/reactionstester.com/" target="_blank">Reactions tester</a></br>
                <a href="http://79.170.40.170/nickalexandershowmanyfingers.com/" target="_blank">How many fingers?</a><br/>
                <a href="http://176.32.230.8/nicksproject1.com/" target="_blank">Javascript circle</a>
              </div>
            </div>
          </div>
        </div>

    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>

1 个解决方案

解决方案1
 0 已采纳  2016-05-10 17:38:33

This is because md means medium, which is the display used mainly for tablets and netbooks. 这是因为md表示媒介，它是主要用于平板电脑和上网本的显示器。 As well as col-md-6 on both of your divs, add a `col-xs-6. 除了两个div上的col-md-6 ，还要添加一个`col-xs-6。 This is the Extra Small column and works on Phones. 这是“超小型”列，适用于“电话”。 For future reference, please add all code and relevant information. 为了将来参考，请添加所有代码和相关信息。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用2 col-md-6同时适合文本和图像 - how to fit both text and image in a row using 2 col-md-6 将面板调整为col-md-6 - Resize panel to col-md-6 col-md-6在移动设备上没有响应 - col-md-6 is not responsive on mobile Bootstrap：为什么我的 col-md-6 不起作用？ - Bootstrap : Why is my col-md-6 not working? Bootstrap col-md-6对齐垂直中心 - Bootstrap col-md-6 align vertical centre 将col-md-6 div推到下一行 - Push col-md-6 div to next row 缩小 col-md-6 的左右边框 - Shrink the left and right borders of a col-md-6 col-md-12在col-md-6内部无法正常工作？ - Col-md-12 is not working properly inside col-md-6? 将鼠标悬停在单独的div中的列表项上时如何显示“ col-md-6” div - How to have “col-md-6” div appear when hovering over list items in separate div 具有空白表单组col-md-6的引导网格 - bootstrap grid with blank form-group col-md-6
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM