如何將文本移到容器的左側？

Question

我已經嘗試在CSS中使用margin 0 auto，但是它似乎沒有用，我不太確定自己在做什么錯，有人可以幫助我嗎？ 我想將文本移到容器的左側，因為到目前為止，它位於容器的中間。 我正在談論的文本是p標簽中的文本，它們是電子郵件，Facebook，instagram和twitter。 感謝您抽出寶貴的時間來幫助您。 祝你有美好的一天！

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
                <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
                <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>
            </ul>

        </div>
    </div>
</nav>

    <div class="container">
      <div class="jumbotron">
        <p style="font-size:24px;"></p>ppinzon-iradian@hotmail.com</p>
        </br>
        <p><a>Facebook</a></p>
        <p><a>Instagram</a></p>
        <p><a>Twitter</a></p>
      </div>

    </div> <!-- /container -->

<div>
</div>
</body>
</html>

CSS：

.navbar-default{
    background: #fff;
    margin-top:3.5%;
    border:0px;
}

.navbar-brand
{
    font-family: helvetica;
    font-size: 24px;
}

ul, li, a
{
    font-family: helvetica;
    font-size: 24px;
    color: #000000;
    letter-spacing: -0.5px;
    font-weight: 100;
}

.navbar-toggle
{
    border:0px;
}

.col-xs-6
{
    margin-top:1.5%;
    line-height: 27px;
}

.row
{
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

.jumbotron
{
    background: #fff;
    border:0px;
    font-family: helvetica;
    font-size: 24px;
    text-decoration: none;
}

Answer 1

您要刪除邊距的元素位於.jumbotron元素內，該元素由引導程序設置樣式，並將添加這些邊距/填充。 在docs上查看jumbotron

<div class="jumbotron">

您可以通過在樣式中添加!important來覆蓋樣式（在引導樣式之后讓我煩惱），也可以使用jumbotron以外的其他引導組件。

Answer 2

如果您的意思是.jumbotron類中的文本，則只需刪除中的padding-left

@media screen and (min-width: 768px) {
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 60px;
        padding-left: 0;
    }
}

或只是將其刪除

@media screen and (min-width: 768px) {
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 60px;
    {
}

Answer 3

當前， p元素周圍有很大的填充。 要解決此問題而又不使用bootstrap類覆蓋它，請添加新類no-padding ，然后在針對該新類的css上覆蓋它。

例如

HTML

<div class="container">
  <div class="jumbotron no-padding">
    <p style="font-size:24px;"></p>ppinzon-iradian@hotmail.com</p>
    </br>
    <p><a>Facebook</a></p>
    <p><a>Instagram</a></p>
    <p><a>Twitter</a></p>
  </div>

</div> <!-- /container -->

CSS

.container .jumbotron.no-padding
{
    background: #fff;
    border:0px;
    font-family: helvetica;
    font-size: 24px;
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
}

小提琴

Answer 4

通過css頁面或內聯樣式，從jumbotron容器中除去左側填充物。

例：

<div class="jumbotron" style="padding-left:0px;">
// your content here
</div>

或（使用CSS）：

.jumbotron {
     padding-left: 0px !important;
}

小提琴： https : //jsfiddle.net/mwatz122/614wjpjh/

如何將文本移到容器的左側？

問題描述

4 個解決方案

解決方案1
0 2015-08-31 19:40:43

解決方案2
0 2015-08-31 19:43:37

解決方案3
0 已采納 2015-08-31 19:45:00

解決方案4
0 2015-08-31 19:45:13

如何將文本移到容器的左側？

問題描述

4 個解決方案

解決方案1 0 2015-08-31 19:40:43

解決方案2 0 2015-08-31 19:43:37

解決方案3 0 已采納 2015-08-31 19:45:00

解決方案4 0 2015-08-31 19:45:13

解決方案1
0 2015-08-31 19:40:43

解決方案2
0 2015-08-31 19:43:37

解決方案3
0 已采納 2015-08-31 19:45:00

解決方案4
0 2015-08-31 19:45:13